@flx

Three-column bento: primary tile (two-thirds) with title, description, CTA and media, plus supporting image cards.

Auto-scroll carousel that pauses on item hover and reveals title.

A carousel of cards with a title and description.

A carousel of media with a title and description.

Two-column split with serif headline, supporting copy, optional CTA, and a media panel.

Two-column icon card grid with serif section header and subtle entrance motion.

A grid of media cards with a section header and item details below each image.

Two-column grid with serif header, media on top, copy, and optional CTA per column.

A focus grid with items that can be focused and dimmed.

List of items: select one to reveal its description and media.

Two-column card grid with a serif section header, copy above each image, and subtle entrance motion.

A centered text block with a title, description, and CTA.

A centered serif hero with a soft gradient wash, pill CTA, and a floating integration cloud.

A left-aligned serif hero with a media panel: an image backdrop with a floating dashboard mockup on top.

A centered hero with dual CTAs and an image that fades into the page below the copy.

A two-column editorial hero with a soft background wash and a layered collage of two overlapping images.

An editorial hero with a left tagline, right-aligned headline and copy, and a full-width image below.

A split product hero with dual CTA, a compact logo row, and the Spot 01 illustration.

An editorial hero with a full-width image above, a top-aligned tagline, and right-aligned headline and copy below.

A split hero with a bold headline, avatar social proof, and two image cards with invertible overlay text and CTAs.

A centered real-estate hero with a search bar, a masked architecture image that fades into the page, and a split closing statement.

A centered hero with a highlighted headline, dual CTAs, social proof, and a fanned collage of three overlapping images.

A split-copy hero with a light product studio mock — issue feed, properties, and a floating agent panel that fades into the page.

A full-bleed image hero with an oversized name, an established label, and a floating pill CTA anchored to the corner.

Asymmetric editorial hero with serif brand title, supporting copy, and two overlapping media frames.

Logo carousel with auto-scroll, edge gradient and minimalist style.

Sticky media that changes as you scroll through text content.

Shared CTA component with link and button variant

A dynamic icon component with a name and size.

A single testimonial with quote, avatar, author name and role.

Only one section open at a time, type="single" collapsible. The default behavior.

type="multiple" keeps several sections open at once.

Leading icon beside each trigger label.

A titled question-and-answer list.

Each item is a bordered card with spacing between them.

Plus icon on each trigger that turns into a minus when open, instead of a chevron.

Rotating chevron placed before the label instead of after it.

Lists, links, and a button inside the panel body.

One trigger disabled while the others stay interactive.

An accordion rendered inside another panel body.

Borderless minimal rows with an active color on open.

Each trigger sits on a muted, rounded background.

Controlled value with expand-all / collapse-all buttons.

Grouped switch rows revealed inside each panel.

Two-line trigger pairing a title with helper text.

Image avatar with an initials fallback.

Missing image falls back to initials.

Generic user icon when there is no image or name.

Small, default, and large sizes side-by-side.

Tinted initials fallbacks using semantic tokens.

Presence dot in the corner showing online, away, or offline.

Verified check icon inside the AvatarBadge.

Avatar beside a name and email, forming a user row.

Overlapping AvatarGroup stack of members.

Overlapping group with a +N count for the remaining members.

Hover each avatar in the group to reveal its name.

Skeleton placeholder while the avatar loads.

Icon badge pinned to the top-right corner.

A single default badge.

All six variants side-by-side: default, secondary, destructive, outline, ghost, link.

Leading verified icon before the label.

A colored presence dot beside an outline label.

Tinted success, warning, error, and info states.

Pill-shaped numeric counts with tabular figures.

render prop renders the badge as an anchor with a trailing icon.

Dismissible tag chips with a trailing remove button.

Assignee chip with a leading avatar inside the badge.

Small, default, and large sizes via className.

Up and down arrows with tinted gain / loss percentages.

Round icon-only badges across variants.

A wrapping group of outline badges as tags.

Icon, message, and a subtle bordered surface.

Info, success, warning, and error tones stacked.

A close button hides the banner with a restore link.

Message paired with Later and Update now buttons.

Full-width gradient promo with a New tag and arrow.

Collapsible release notes that reveal highlights.

Amber system notice with a pulsing status dot.

Blue prompt with a Resend email button that switches to a sent confirmation.

A list of dismissible notices, each removed on its own.

Live import banner with a spinner and a progress bar.

Links with a current page and chevron separators.

Each crumb prefixed with a small icon, such as a house, folder, or file.

Swap the chevron for a slash via separator children.

Lighter middle dot divider between crumbs.

Middle levels replaced by a static ellipsis icon, showing only the first and last crumbs.

Ghost icon Button opens a menu of the hidden levels.

Dropdown on small screens, full inline path from sm up.

Breadcrumb links that open in a new tab, with an external-link icon on the outbound crumb.

Last crumb is a Button switcher for sibling pages.

Default button with text label.

All six variants side-by-side: default, secondary, outline, ghost, destructive, link.

Extra small, small, default, and large sizes.

Button with an icon placed before the text label.

Button with an icon placed after the text label.

Square icon-only buttons in every icon size.

Button in the disabled state, visually dimmed and non-interactive.

Button with a spinning loader icon and label, indicating an in-progress async action.

Link-styled button that navigates to an external URL, rendered as an anchor with a trailing external-link icon.

User picker style button with a small avatar image leading the text label.

CTA arrow nudges right on hover.

Notification count badge overlapping an icon button.

Icon and label swap to a check on copy.

Refresh button whose icon rotates a full 360° on each click.

Three bars morph into an X on press.

Horizontal row of buttons with merged borders, used for segmented controls like date range pickers.

Stacked column of buttons with merged borders, used for vertical navigation menus.

Compact toolbar of icon-only buttons with merged borders, used for text formatting actions.

Static text label leading a group of action buttons, useful for labelled sort or filter controls.

Primary action button paired with a chevron that opens a dropdown of secondary actions.

Prev arrow, numbered page buttons, and Next arrow in a merged-border row.

Read-only text value paired with a trailing icon button that copies it to the clipboard, with an animated check on success.

Merged-border button row where one step is visually disabled and non-interactive.

Cancel + Delete spaced action pair.

Sort dropdown paired with a direction-toggle icon button in a merged-border row.

Color swatch button that opens a grid of color swatches, paired with a hex value label in a merged-border row.

Header, action, content, and a bordered footer.

Top media banner above title, body, and a CTA footer.

Image on the left beside a category, title, and link.

Three-dot icon button in the header corner opens a dropdown with rename, share, and delete options.

KPI value with an icon and a tinted trend badge.

Email and password fields with sign-in and OAuth buttons.

A footer button launches a modal with subscription detail.

Centered avatar, stats row, and follow / message actions.

Highlighted plan with a Popular badge and feature checklist.

Square image with a sale badge, price, and add-to-cart.

Horizontal field rows each toggled with a switch.

Clickable plan cards with a ring and check on the active one.

Text and a CTA over a gradient-darkened cover image.

Name on card, card number with icon, expiry, CVC, and country select fields with a pay button.

Single checkbox with a label.

Checkbox with a label and helper description.

Disabled unchecked and disabled checked states.

Grouped list of notification checkboxes, each with a label and helper description, inside a labelled fieldset.

Parent checkbox with an indeterminate mixed state.

Multi-level file tree; parents derive checked / indeterminate from children.

Bordered add-on cards that highlight when checked.

Selectable saved credit cards with brand and last four.

Data table with a select-all header, per-row checkboxes, and a count.

Checkbox with an inline error message that appears when the form is submitted without checking it.

Controller binds a checkbox group to React Hook Form; Zod requires at least one selection.

form.Field wires a checkbox group to TanStack Form; Zod validates on submit and shows an error when none are selected.

Canonical starred-repos toggle with a chevron trigger.

Stacked question rows; each answer expands with an animated chevron.

Nested folders built from collapsible rows, with folder icons that swap on open.

Truncated paragraph reveals the rest; trigger label swaps to Show less.

Collapsible navigation sections with sub-items and a rotating chevron.

Form reveals extra fields behind an Advanced options toggle.

Canonical command menu with grouped items, icons, and shortcuts.

Spotlight-style ⌘K palette toggled by a button or keyboard shortcut.

Rich search dialog with recent, pages, and people plus a hint footer.

Debounced search with skeleton rows while loading, an empty state, and shouldFilter disabled for server-driven results.

Popover + Command framework picker with a check mark.

Selected value shows an inline X that clears without reopening.

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.

Options split into labeled groups with separators, demonstrated with timezones organized by region.

Avatars with name and email subtext in the trigger and options.

Ghost trigger with a colored status dot, issue-tracker style.

Combobox composed with an accessible field Label.

Controller binds the combobox to RHF; Zod resolver drives FieldError on submit.

form.Field wires the combobox; Zod onSubmit validator surfaces FieldError when touched.

Polished yes/no with icon and clear hierarchy.

FieldGroup form with Save and Cancel footer.

Destructive warning with icon and emphasized copy.

Long scroll body; Accept and Decline pinned footer.

Readonly URL with copy control; minimal footer.

Header fixed; scrollable changelog-style body.

6-digit InputOTP with separator; Verify footer.

Compact hero image, title, and description; dual CTAs.

No corner close button; dismiss only through the footer.

Scrollable avatar rows with selection; Invite footer.

Completion check icon and Continue action.

Type delete to enable destructive button.

Notifications and Security blocks via Separator.

Thumbnail grid with selection ring.

Icon header plus email field.

Many fields in scroll; footer-only sticky.

Full-width footer buttons for mobile-friendly CTAs.

Dialog form with RHF, Zod resolver, and FieldError on invalid fields.

Dialog form with TanStack Form and Zod onSubmit validation.

Dialog stacked inside another dialog, e.g. avatar picker from profile.

Dialog triggered by a DropdownMenuItem with onSelect preventDefault.

Label, separator, and a list of action items.

Leading icons paired with trailing keyboard shortcuts.

Multiple labeled groups divided by separators.

A red destructive Delete action separated from the regular items.

Non-interactive items dimmed with the disabled prop.

Toggle multiple view options with checkbox items.

Radio items that keep exactly one option selected at a time.

A menu item that reveals a nested flyout panel with more options.

Avatar trigger with a name and email header block.

Ghost ellipsis trigger opens a compact actions menu.

Per-row ellipsis menu with edit, copy, and remove.

Align start or end and open the menu to the side.

Menu whose open/closed state is managed externally and reflected in the trigger label.

Radio group toggling light, dark, and system themes.

Checkbox items with a count badge and a clear action.

Bell trigger with an unread badge and an activity list.

A menu item opens a controlled confirmation dialog.

Controller binds a radio group to RHF; Zod requires a selection.

form.Field wires the radio group; Zod onSubmit surfaces FieldError.

Icon, title, and description for an empty list.

First-run state with primary and secondary CTAs.

Search empty state with a clear-filters action.

Bordered empty team card with an avatar stack and invite.

Empty inbox state composed inside a Dialog.

Plain text input with a placeholder, no addons.

Input with trailing search icon addon.

Text input rendered in a disabled, non-interactive state.

Password input with a trailing eye-off icon to indicate visibility toggle.

URL input with a fixed "https://" prefix and ".com" suffix text addons.

Spinning loader in the trailing addon while searching.

Clear button appears in the trailing addon when the field has text.

Help icon in the trailing addon opens a tooltip on hover.

Info button in the trailing addon opens a popover with helper content.

Trailing addon button opens a menu to choose search scope.

Labeled text input with a supporting description line below the field.

Controller binds Input to RHF; Zod resolver drives FieldError on submit.

form.Field wires Input; Zod onSubmit validator surfaces FieldError when touched.

ButtonGroup pairs a text input with a trailing search action button.

Username field with a fixed @company.com suffix addon, locking the email domain.

Nested ButtonGroup: currency Select, amount input, and submit icon button.

Attach button plus InputGroup message field and send action in a ButtonGroup.

Title plus supporting description.

Default, outline, and muted variants side-by-side.

Default, sm, and xs sizes side-by-side.

Leading icon placed before the title and description.

User avatar photo placed before the name and subtitle.

Small image thumbnail placed before the title and subtitle.

Avatar, name, role, and a trailing action button.

Status badge above the title and a metadata row below the description.

The entire row is clickable, navigating to a URL with a trailing arrow icon.

Multiple rows grouped together with thin dividers between each row.

Avatars with name, role, and Follow action per row.

Leading icon, title with an unread dot indicator, and a trailing timestamp.

File icon, name, size metadata, and a trailing overflow menu with actions per row.

Title and description with a trailing Switch.

Brand icon, status badge in title, connect Switch.

Stacked KPI rows with label, value, and trend delta.

Stacked tier rows with Popular badge, price, and CTA button.

Icon timeline rows with relative time footer.

Compact user avatar and email placed at the top of a dropdown menu.

File rows with image thumbnails displayed inside a floating popover panel.

Overlapping avatar stack above an empty-state message with an invite button.

Numbers with ellipsis, previous, and next links.

Inline numbers from sm up, "Page X of Y" on mobile.

Stateful current page with a sliding ellipsis range.

Page-size select with first, prev, next, and last.