A collection of customizable UI blocks with interactive live previews
Two-tab card with a profile edit form on one tab and a password change form on the other.
Avatar trigger with a name and email header block.
Icon timeline rows with relative time footer.
Form reveals extra fields behind an Advanced options toggle.
Align the content to the start, center, or end of the trigger.
A card with a gradient area chart.
Sidebar, KPI cards, a bar chart, and a recent activity list.
Wireframe: sidebar, stat cards, chart, and a list.
Dropdown opens in popper position anchored below the trigger with a small offset, giving a tooltip-style layout.
Full-width gradient promo with a New tag and arrow.
A hero image, title, byline, and stacked body lines.
Two linked cards with titles for adjacent articles.
render prop renders the badge as an anchor with a trailing icon.
Breadcrumb links that open in a new tab, with an external-link icon on the outbound crumb.
Link-styled button that navigates to an external URL, rendered as an anchor with a trailing external-link icon.
The entire row is clickable, navigating to a URL with a trailing arrow icon.
Avatars with name and email subtext in the trigger and options.
Debounced search with skeleton rows while loading, an empty state, and shouldFilter disabled for server-driven results.
Bordered empty team card with an avatar stack and invite.
A circle beside two lines, mimicking a loading user row.
Verified check icon inside the AvatarBadge.
Only one section open at a time, type="single" collapsible. The default behavior.
Image avatar with an initials fallback.
A single default badge.
Icon, message, and a subtle bordered surface.
Links with a current page and chevron separators.
Default button with text label.
Header, action, content, and a bordered footer.
Single checkbox with a label.
Canonical starred-repos toggle with a chevron trigger.
Canonical command menu with grouped items, icons, and shortcuts.
Label, separator, and a list of action items.
Icon, title, and description for an empty list.
Plain text input with a placeholder, no addons.
Title plus supporting description.
Numbers with ellipsis, previous, and next links.
Default popover with a button trigger and simple text.
Minimal single-value dropdown with a placeholder and a flat list of options.
A stack of placeholder lines for a text block.
A single standalone switch.
Caption, header, and a footer total row.
Three tabs with the default filled variant.
Default dark tooltip on a button.
Horizontal row of buttons with merged borders, used for segmented controls like date range pickers.
Three-column bento: primary tile (two-thirds) with title, description, CTA and media, plus supporting image cards.
A row of collection cards, one twice as wide, each with a product photo bleeding off the top, a title, a short description and a link.
A product grid with a tall featured item in the center, four smaller items around it, category badges, prices and names.
Two stacked cards with a two-tone title, a paragraph and a pill button beside a product photo surrounded by short feature callouts on a faint grid.