A collection of customizable UI blocks with interactive live previews
Sign up with name, email, a strong password and terms.
A visual credit card mockup above a labeled switch for enabling automatic monthly payments.
Muted background and custom border on the trigger.
Tooltips that open instantly, after 500ms, or after 1.2s, showing different hover delay behaviors.
Swap the chevron for a slash via separator children.
Override the default width via className on PopoverContent.
A layered app dashboard with a floating notification.
Destructive warning with icon and emphasized copy.
Compact padding and type for high-density data.
A red destructive Delete action separated from the regular items.
Cancel + Delete spaced action pair.
Form with inline labeled inputs for width, max-width, height, and max-height.
Button in the disabled state, visually dimmed and non-interactive.
Disabled unchecked and disabled checked states.
Text input rendered in a disabled, non-interactive state.
Non-interactive select state.
Disabled off and disabled on states.
One trigger disabled while the others stay interactive.
Non-interactive items dimmed with the disabled prop.
Select with individual disabled options.
One trigger disabled while others stay interactive.
A close button hides the banner with a restore link.
Carousel-style dots; the active page expands to a pill.
Lighter middle dot divider between crumbs.
Single choice via a dropdown menu radio group bound through Controller.
Single choice via a dropdown menu radio group wired with form.Field.
Last crumb is a Button switcher for sibling pages.
Start from an empty state, then add and remove teammate rows with per-item validation.
Start from an empty state, then add and remove teammate rows with per-item validation.
FieldGroup form with Save and Cancel footer.
Validate an email address with instant feedback.
Validate an email address with instant feedback.
Blue prompt with a Resend email button that switches to a sent confirmation.
Overlapping avatar stack above an empty-state message with an invite button.
Collapsible release notes that reveal highlights.
Controlled value with expand-all / collapse-all buttons.
TanStack Table, expandable parent rows reveal nested child rows for tree-shaped data.
Missing image falls back to initials.
A titled question-and-answer list.
Stacked question rows; each answer expands with an animated chevron.
List of items: select one to reveal its description and media.
A process section with a split title/description header and a portrait image flanked by two columns of numbered step cards.
A sticky title/description column paired with a scrolling list of features, each with its own title, description, and media.
A title with a two-column list of ruled milestones below it, beside a tall photo.
A centered product title over three icon features, a large product photo and a product card with finish swatches and a CTA.
A short title and a numbered list of four features beside a large photo overlapped by a smaller one.
File icon, name, size metadata, and a trailing overflow menu with actions per row.
Nested folders built from collapsible rows, with folder icons that swap on open.