A collection of customizable UI blocks with interactive live previews
Icon stacked above the title in each trigger, with a visual panel below.
Text and a CTA over a gradient-darkened cover image.
Tabs inside a card with stats, member list, and billing summary panels.
Empty inbox state composed inside a Dialog.
Compact user avatar and email placed at the top of a dropdown menu.
Labeled text input with a supporting description line below the field.
Select composed with Field, FieldLabel, and description.
File rows with image thumbnails displayed inside a floating popover panel.
Brand icon, status badge in title, connect Switch.
Stateful current page with a sliding ellipsis range.
Checkbox with an inline error message that appears when the form is submitted without checking it.
A required switch in a form that shows an inline error message when submitted while off.
Icon header plus email field.
Numeric input to jump directly to any page.
Rotating chevron placed before the label instead of after it.
A light-colored tooltip that appears in light mode, inverted from the default dark style.
Underline indicator instead of filled background.
Repeated rows, each with a circular avatar and two text lines.
A filterable list of projects with a row of line tabs, then ruled rows pairing a title and meta, a short description with a pill button, and a wide photo.
A centered title with a year, a column of boxed tags beside a large paragraph, and a ruled description list of labelled details.
Button with a spinning loader icon and label, indicating an in-progress async action.
Skeleton placeholder while the avatar loads.
Email and password fields with sign-in and OAuth buttons.
Many fields in scroll; footer-only sticky.
Amber system notice with a pulsing status dot.
An image card with a soft gradient fade and caption.
A stat card with trend and sparkline, layered over a second.
type="multiple" keeps several sections open at once.
Multi-select showing every choice as a removable badge chip in the trigger.
Trigger shows "first, +N" with a separate button to clear all.
Dashed trigger with count badges, checkbox rows, facet counts, and a clear footer.
Checkbox items with a count badge and a clear action.
An accordion rendered inside another panel body.
Dialog stacked inside another dialog, e.g. avatar picker from profile.
Multi-level file tree; parents derive checked / indeterminate from children.
Subscribe with an email and a delivery frequency.
Subscribe with an email and a delivery frequency.
Hide the pointer arrow for a flatter look.
Search empty state with a clear-filters action.
Bell trigger with an unread badge and an activity list.
Leading icon, title with an unread dot indicator, and a trailing timestamp.
A fanned stack of notification cards.
Horizontal field rows each toggled with a switch.
Switches with labels and descriptions inside the popover.
Notification rows with an icon, message text, timestamp, and unread indicator dot.
Keep a numeric input within a sensible range.
Keep a numeric input within a sensible range.
TanStack Table, numbered page buttons with prev / next arrows.