Also in the flx registry

Copy a prompt for your agent, copy the install command, or open the docs that ship it.

Multiple

accordion-02

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

accordion1 file

With icons

accordion-03

Leading icon beside each trigger label.

accordion1 file

FAQ

accordion-04

A titled question-and-answer list.

accordion1 file

Separated cards

accordion-05

Each item is a bordered card with spacing between them.

accordion1 file

Plus / minus icon

accordion-06

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

@base-ui/react1 file

Rich content

accordion-09

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

accordion, button1 file

Disabled item

accordion-10

One trigger disabled while the others stay interactive.

accordion1 file

Nested

accordion-11

An accordion rendered inside another panel body.

accordion1 file

Ghost

accordion-12

Borderless minimal rows with an active color on open.

accordion1 file

Filled trigger

accordion-13

Each trigger sits on a muted, rounded background.

accordion1 file

Settings sections

accordion-15

Grouped switch rows revealed inside each panel.

accordion, switch, label1 file

With subtitle

accordion-16

Two-line trigger pairing a title with helper text.

accordion1 file

Basic

avatar-01

Image avatar with an initials fallback.

avatar1 file

Fallback initials

avatar-02

Missing image falls back to initials.

avatar1 file

Icon fallback

avatar-03

Generic user icon when there is no image or name.

avatar1 file

Sizes

avatar-04

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

avatar1 file

Colored fallback

avatar-05

Tinted initials fallbacks using semantic tokens.

avatar1 file

Status badge

avatar-06

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

avatar1 file

Badge with icon

avatar-07

Verified check icon inside the AvatarBadge.

avatar1 file

With name

avatar-08

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

avatar1 file

Group

avatar-09

Overlapping AvatarGroup stack of members.

avatar1 file

Group with count

avatar-10

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

avatar1 file

Group with tooltip

avatar-11

Hover each avatar in the group to reveal its name.

avatar, tooltip1 file

Loading skeleton

avatar-12

Skeleton placeholder while the avatar loads.

skeleton1 file

Icon on top

avatar-13

Icon badge pinned to the top-right corner.

avatar1 file

Basic

badge-01

A single default badge.

badge1 file

Variants

badge-02

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

badge1 file

With icon

badge-03

Leading verified icon before the label.

badge1 file

With status dot

badge-04

A colored presence dot beside an outline label.

badge1 file

Status colors

badge-05

Tinted success, warning, error, and info states.

badge1 file

Count

badge-06

Pill-shaped numeric counts with tabular figures.

badge1 file

As link

badge-07

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

badge1 file

Removable

badge-08

Dismissible tag chips with a trailing remove button.

badge1 file

With avatar

badge-09

Assignee chip with a leading avatar inside the badge.

badge, avatar1 file

Sizes

badge-10

Small, default, and large sizes via className.

badge1 file

Trend delta

badge-11

Up and down arrows with tinted gain / loss percentages.

badge1 file

Basic

banner-01

Icon, message, and a subtle bordered surface.

1 file

Variants

banner-02

Info, success, warning, and error tones stacked.

1 file

Dismissible

banner-03

A close button hides the banner with a restore link.

button1 file

Announcement bar

banner-06

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

1 file

Expandable

banner-07

Collapsible release notes that reveal highlights.

button1 file

With progress

banner-14

Live import banner with a spinner and a progress bar.

button, progress1 file

Bento grids 01

bento-grids-01

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

react-wrap-balancer2 files

Basic

breadcrumb-01

Links with a current page and chevron separators.

breadcrumb1 file

With dropdown

breadcrumb-06

Ghost icon Button opens a menu of the hidden levels.

breadcrumb, dropdown-menu, button1 file

Responsive collapse

breadcrumb-07

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

breadcrumb, dropdown-menu, button1 file

As link

breadcrumb-08

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

breadcrumb1 file

Dropdown at end

breadcrumb-09

Last crumb is a Button switcher for sibling pages.

breadcrumb, dropdown-menu, button1 file

Basic

button-01

Default button with text label.

button1 file

Variants

button-02

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

button1 file

Sizes

button-03

Extra small, small, default, and large sizes.

button1 file

With leading icon

button-04

Button with an icon placed before the text label.

lucide-react1 file

With trailing icon

button-05

Button with an icon placed after the text label.

lucide-react1 file

Icon only

button-06

Square icon-only buttons in every icon size.

lucide-react1 file

Disabled

button-07

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

button1 file

Loading

button-08

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

lucide-react1 file

As link

button-09

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

lucide-react1 file

With avatar

button-10

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

button, avatar1 file

Hover slide arrow

button-11

CTA arrow nudges right on hover.

lucide-react1 file

With badge

button-12

Notification count badge overlapping an icon button.

lucide-react1 file

Copy to clipboard

button-13

Icon and label swap to a check on copy.

lucide-react, motion1 file

Hover rotate refresh

button-14

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

lucide-react1 file

Hamburger toggle

button-15

Three bars morph into an X on press.

button1 file

Basic group

button-16

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

button, button-group1 file

Vertical group

button-17

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

button, button-group1 file

Icon toolbar

button-18

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

lucide-react1 file

With label prefix

button-20

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

button, button-group1 file

Split button

button-21

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

lucide-react1 file

Pagination

button-22

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

lucide-react1 file

Copy field

button-23

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

lucide-react, motion1 file

Group with disabled

button-24

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

button, button-group1 file

Destructive pair

button-25

Cancel + Delete spaced action pair.

lucide-react1 file

With select

button-26

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

lucide-react1 file

With popover swatch

button-27

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

button, button-group, popover1 file

Basic

card-01

Header, action, content, and a bordered footer.

card, button1 file

With image

card-02

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

card, button1 file

Horizontal

card-03

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

card, button, badge1 file

With action menu

card-04

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

card, button, dropdown-menu1 file

Opens in dialog

card-07

A footer button launches a modal with subscription detail.

card, button, dialog1 file

Selectable

card-12

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

card1 file

Carousel 01

carousel-01

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

motion, class-variance-authority2 files

Carousel 02

carousel-02

A carousel of media with a title and description.

react-wrap-balancer, lucide-react2 files

Carousel 03

carousel-03

A carousel of cards with a title and description.

carousel, button2 files

Basic

checkbox-01

Single checkbox with a label.

checkbox, label1 file

Table row selection

checkbox-10

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

checkbox, table1 file

Basic

collapsible-01

Canonical starred-repos toggle with a chevron trigger.

collapsible, button1 file

File tree

collapsible-03

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

collapsible1 file

collapsible-04

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

collapsible1 file

Advanced options

collapsible-06

Form reveals extra fields behind an Advanced options toggle.

collapsible, input, label1 file

Basic

command-01

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

command1 file

Command dialog

command-02

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

command, button, dialog1 file

Global search

command-03

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

command, button, dialog, avatar1 file

Async loading

command-04

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

command1 file

Combobox

command-05

Popover + Command framework picker with a check mark.

popover, command, button1 file

Multiple — chips

command-07

Multi-select showing every choice as a removable badge chip in the trigger.

popover, command, button, badge1 file

Grouped picker

command-08

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

popover, command, button1 file

Assignee picker

command-09

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

popover, command, button, avatar1 file

Status picker

command-10

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

popover, command, button1 file

With label

command-11

Combobox composed with an accessible field Label.

popover, command, button, label1 file

React Hook Form + Zod

command-12

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

react-hook-form, zod, @hookform/resolvers, sonner1 file

TanStack Form + Zod

command-13

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

@tanstack/react-form, zod, sonner1 file

Multiple — count summary

command-14

Trigger shows "first, +N" with a separate button to clear all.

popover, command, button1 file

Multiple — faceted filter

command-15

Dashed trigger with count badges, checkbox rows, facet counts, and a clear footer.

popover, command, button, badge1 file

Side Panel

comment-thread-2

Side Panel for Comment Thread.

lucide-react1 file

Content 02

content-02

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

motion, react-wrap-balancer2 files

Content 04

content-04

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

motion, react-wrap-balancer2 files

Content 05

content-05

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

motion2 files

Content 06

content-06

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

motion, react-wrap-balancer2 files

Content 07

content-07

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

motion, react-wrap-balancer2 files

Content 09

content-09

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

motion, react-wrap-balancer2 files

Content 11

content-11

A billing overview split with a dashboard preview card and two feature highlights, built for the app-shell preset.

motion, react-wrap-balancer3 files

CTA (Call to Action)

cta

Shared CTA component with link and button variant

class-variance-authority1 file

Analytics overview

dashboard-01

Sidebar, KPI cards, a bar chart, and a recent activity list.

lucide-react, recharts1 file

Multi-Step

delete-account-2

Multi-Step for Delete Account.

lucide-react1 file

Grace Period

delete-account-3

Grace Period for Delete Account.

lucide-react1 file

Confirm action

dialog-01

Polished yes/no with icon and clear hierarchy.

dialog, button1 file

Edit profile

dialog-02

FieldGroup form with Save and Cancel footer.

dialog, button, input, field1 file

Delete account

dialog-03

Destructive warning with icon and emphasized copy.

dialog, button1 file

Terms, sticky footer

dialog-04

Long scroll body; Accept and Decline pinned footer.

dialog, button, separator1 file

Share link

dialog-05

Readonly URL with copy control; minimal footer.

dialog, button, input, label1 file

Sticky header

dialog-06

Header fixed; scrollable changelog-style body.

dialog, button, badge1 file

Verify code (OTP)

dialog-08

6-digit InputOTP with separator; Verify footer.

input-otp1 file

Onboarding welcome

dialog-09

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

dialog, button1 file

Footer-only dismiss

dialog-10

No corner close button; dismiss only through the footer.

dialog, button1 file

Pick teammates

dialog-11

Scrollable avatar rows with selection; Invite footer.

dialog, button, avatar1 file

Success

dialog-12

Completion check icon and Continue action.

dialog, button1 file

Type to confirm

dialog-13

Type delete to enable destructive button.

dialog, button, input, field1 file

Settings sections

dialog-14

Notifications and Security blocks via Separator.

dialog, button, separator, switch1 file

Choose image

dialog-15

Thumbnail grid with selection ring.

dialog, button1 file

Long form, sticky footer

dialog-17

Many fields in scroll; footer-only sticky.

dialog, button, input, field1 file

Stacked actions

dialog-18

Full-width footer buttons for mobile-friendly CTAs.

dialog, button1 file

React Hook Form

dialog-19

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

react-hook-form, zod, @hookform/resolvers, sonner1 file

TanStack Form

dialog-20

Dialog form with TanStack Form and Zod onSubmit validation.

@tanstack/react-form, zod, sonner1 file

Nested dialog

dialog-21

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

dialog, button, field, input1 file

From dropdown

dialog-22

Dialog triggered by a DropdownMenuItem with onSelect preventDefault.

dialog, button, dropdown-menu, field1 file

Basic

dropdown-01

Label, separator, and a list of action items.

dropdown-menu, button1 file

With icons and shortcuts

dropdown-02

Leading icons paired with trailing keyboard shortcuts.

dropdown-menu, button1 file

Grouped

dropdown-03

Multiple labeled groups divided by separators.

dropdown-menu, button1 file

Destructive item

dropdown-04

A red destructive Delete action separated from the regular items.

dropdown-menu, button1 file

Disabled items

dropdown-05

Non-interactive items dimmed with the disabled prop.

dropdown-menu, button1 file

Checkbox items

dropdown-06

Toggle multiple view options with checkbox items.

dropdown-menu, button1 file

Radio group

dropdown-07

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

dropdown-menu, button1 file

Submenu

dropdown-08

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

dropdown-menu, button1 file

Account menu

dropdown-09

Avatar trigger with a name and email header block.

dropdown-menu, avatar1 file

Table row actions

dropdown-11

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

dropdown-menu, button, table1 file

Controlled open

dropdown-13

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

dropdown-menu, button1 file

Multi-select filter

dropdown-15

Checkbox items with a count badge and a clear action.

dropdown-menu, button, badge1 file

Notifications

dropdown-16

Bell trigger with an unread badge and an activity list.

dropdown-menu, button, badge1 file

With dialog

dropdown-17

A menu item opens a controlled confirmation dialog.

dropdown-menu, button, dialog1 file

React Hook Form + Zod

dropdown-18

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

react-hook-form, zod, @hookform/resolvers, sonner1 file

Dynamic Icon

dynamic-icon

A dynamic icon component with a name and size.

lucide-react1 file

Basic

empty-01

Icon, title, and description for an empty list.

lucide-react1 file

With actions

empty-02

First-run state with primary and secondary CTAs.

lucide-react1 file

In dialog

empty-05

Empty inbox state composed inside a Dialog.

lucide-react1 file

Feature 01

feature-01

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

motion2 files

Feature 02

feature-02

A process section with a split title/description header and a portrait image flanked by two columns of numbered step cards.

react-wrap-balancer, motion2 files

Feature 03

feature-03

A sticky title/description column paired with a scrolling list of features, each with its own title, description, and media.

react-wrap-balancer, motion2 files

Hero 11

hero-11

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

react-wrap-balancer, motion, lucide-react3 files

Hero 13

hero-13

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

react-wrap-balancer, motion2 files

Basic

input-01

Plain text input with a placeholder, no addons.

input, label1 file

With Addon

input-02

Input with trailing search icon addon.

lucide-react1 file

Disabled

input-03

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

input1 file

With Addon in the end

input-04

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

input1 file

With prefix and suffix

input-05

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

input-group1 file

With loading spinner

input-06

Spinning loader in the trailing addon while searching.

lucide-react1 file

With clear button

input-07

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

lucide-react1 file

With tooltip

input-08

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

lucide-react1 file

With popover

input-09

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

lucide-react1 file

With dropdown menu

input-10

Trailing addon button opens a menu to choose search scope.

lucide-react1 file

In Form

input-11

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

input, field1 file

React Hook Form + Zod

input-12

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

react-hook-form, zod, @hookform/resolvers, sonner1 file

TanStack Form + Zod

input-13

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

@tanstack/react-form, zod, sonner1 file

With search button

input-14

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

lucide-react1 file

With currency select

input-15

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

lucide-react1 file

With email domain

input-16

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

input-group1 file

With nested input group

input-17

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

lucide-react1 file

Basic

item-02

Title plus supporting description.

item1 file

Variants

item-03

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

item1 file

Sizes

item-04

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

item1 file

With icon

item-05

Leading icon placed before the title and description.

item1 file

With avatar

item-06

User avatar photo placed before the name and subtitle.

item, avatar1 file

With thumbnail

item-07

Small image thumbnail placed before the title and subtitle.

item1 file

With actions

item-08

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

item, button1 file

Header and footer

item-09

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

item, badge1 file

As link

item-10

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

item1 file

Group

item-11

Multiple rows grouped together with thin dividers between each row.

item1 file

User list

item-12

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

item, avatar, button1 file

Notifications

item-13

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

item1 file

File list

item-14

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

item, button, dropdown-menu1 file

Settings row

item-15

Title and description with a trailing Switch.

item, switch1 file

Integrations

item-16

Brand icon, status badge in title, connect Switch.

item, switch, badge1 file

Stat rows

item-17

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

item1 file

Pricing tiers

item-18

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

item, badge, button1 file

Activity feed

item-19

Icon timeline rows with relative time footer.

item1 file

In dropdown menu

item-20

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

item, avatar, button, dropdown-menu1 file

In popover

item-21

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

item, popover, button1 file

Empty team

item-24

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

item, avatar, button1 file

Avatar Stack

live-presence-1

Avatar Stack for Live Presence.

avatar, card, tooltip1 file

Activity Status

live-presence-3

Activity Status for Live Presence.

avatar, card1 file

Logos 01

logos-01

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

carousel2 files

Plan Overview

manage-subscription-1

Plan Overview for Manage Subscription.

lucide-react1 file

Change Plan

manage-subscription-2

Change Plan for Manage Subscription.

lucide-react1 file

Cancel Flow

manage-subscription-3

Cancel Flow for Manage Subscription.

lucide-react1 file

Rows per page

pagination-04

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

button, select1 file

Article prev / next

pagination-06

Two linked cards with titles for adjacent articles.

1 file

Dots

pagination-07

Carousel-style dots; the active page expands to a pill.

1 file

Jump to page

pagination-08

Numeric input to jump directly to any page.

button, input1 file

Basic

popover-01

Default popover with a button trigger and simple text.

popover, button1 file

With header

popover-02

Popover with a bold title and a short description below it.

popover, button1 file

Sides

popover-03

Place the popover on top, right, bottom, or left of the trigger.

popover, button1 file

Alignment

popover-04

Align the content to the start, center, or end of the trigger.

popover, button1 file

Custom width

popover-05

Override the default width via className on PopoverContent.

popover, button1 file

Dimensions form

popover-06

Form with inline labeled inputs for width, max-width, height, and max-height.

lucide-react1 file

Notification settings

popover-07

Switches with labels and descriptions inside the popover.

lucide-react1 file

Color picker

popover-08

Swatch grid with a check icon on the active color.

lucide-react1 file

Share link

popover-09

Readonly URL input with a trailing copy button.

lucide-react1 file

Notifications list

popover-10

Notification rows with an icon, message text, timestamp, and unread indicator dot.

lucide-react1 file

Profile card

popover-11

Banner image, avatar, bio, and follow / message actions.

lucide-react1 file

Cover picker

popover-12

Thumbnail grid with a selection ring for choosing a cover image.

lucide-react1 file

Filters

popover-13

Grouped toggle button filters for status and priority, with reset and apply actions.

lucide-react1 file

Scrollable list

popover-14

Scrollable list of team members with avatars and roles inside a fixed-height popover.

lucide-react1 file

Preset Scope

preset-scope

Activates a preset for a subtree by writing the data-preset attribute. Required by every preset.

1 file

Sienna Preset

preset-sienna

Cream paper and burnt-earth ink. Warm off-white surfaces, a deep brown primary, soft warm-tinted shadows and a generous radius, built for editorial serif headlines and watercolor art.

Vellum Preset

preset-vellum

The Flexnative shell as shipped: near-neutral surfaces, a warm charcoal primary, soft gray chrome and the same radius and shadows as the app itself.

Security Questions

reset-password-3

Security Questions for Reset Password.

lucide-react1 file

Form in a Dialog

rhf-advanced-02

Build an invoice while a dialog validates each line item against its own schema.

react-hook-form, @hookform/resolvers, zod, sonner2 files

Toggle Group

rhf-fields-06

Single-select toggle group bound via Controller with Zod validation.

react-hook-form, @hookform/resolvers, zod, sonner1 file

Select

rhf-fields-07

Grouped select with labelled option groups bound via Controller.

react-hook-form, @hookform/resolvers, zod, sonner1 file

Command

rhf-fields-08

Searchable combobox using Command inside a Popover, bound via Controller.

react-hook-form, @hookform/resolvers, zod, sonner1 file

rhf-recipes-04

Subscribe with an email and a delivery frequency.

react-hook-form, @hookform/resolvers, zod, sonner1 file

Dashboard preview

scene-01

A layered app dashboard with a floating notification.

motion1 file

Grouped

select-02

Options organized into labeled groups.

select, label1 file

With Icons

select-04

Options with leading icons.

lucide-react1 file

Animated content

select-15

Dropdown opens in popper position anchored below the trigger with a small offset, giving a tooltip-style layout.

select1 file

Icon in the trigger

select-16

Fixed leading icon in the trigger alongside the selected value; dropdown options are text only.

select1 file

Tiered Cards

select-a-plan-1

Tiered Cards for Select a Plan.

lucide-react1 file

Audience Segments

select-a-plan-3

Audience Segments for Select a Plan.

lucide-react1 file

Usage Slider

select-a-plan-4

Usage Slider for Select a Plan.

lucide-react1 file

Tabbed Sections

settings-1

Tabbed Sections for Settings.

lucide-react1 file

Sidebar Layout

settings-2

Sidebar Layout for Settings.

lucide-react1 file

Inline Edit

settings-3

Inline Edit for Settings.

lucide-react1 file

Preferences Dialog

settings-4

Preferences Dialog for Settings.

lucide-react1 file

Social First

sign-in-1

Social First for Sign In.

button, input, label1 file

Email & Password

sign-in-2

Email & Password for Sign In.

button, input, label1 file

Magic Link

sign-in-3

Magic Link for Sign In.

lucide-react1 file

Phone & OTP

sign-in-5

Phone & OTP for Sign In.

lucide-react, input-otp1 file

Avatar with text

skeleton-02

A circle beside two lines, mimicking a loading user row.

skeleton1 file

Card

skeleton-03

Media banner above a title, body lines, and a footer.

card, skeleton1 file

List

skeleton-05

Repeated rows, each with a circular avatar and two text lines.

skeleton1 file

Table

skeleton-06

A header row above several placeholder data rows.

skeleton1 file

Select

skeleton-08

A field label above a trigger with a chevron block.

skeleton1 file

Analytics overview

sketch-dashboard-01

Wireframe: sidebar, stat cards, chart, and a list.

1 file

Metrics

spot-01

A stat card with trend and sparkline, layered over a second.

card, badge1 file

Notifications

spot-02

A fanned stack of notification cards.

card, avatar1 file

Media card

spot-03

An image card with a soft gradient fade and caption.

motion1 file

Analytics

spot-04

A card with a gradient area chart.

card, button1 file

Basic

switch-01

A single standalone switch.

switch1 file

With label

switch-02

Switch paired with an accessible field label.

switch, field1 file

With description

switch-03

Label and helper description beside the switch.

switch, field1 file

Sizes

switch-04

The sm and default sizes side-by-side.

switch1 file

Disabled

switch-05

Disabled off and disabled on states.

switch, field1 file

Theme toggle

switch-06

Sun and moon icons flank a light / dark toggle.

switch1 file

Icon in thumb

switch-07

Custom larger toggle with sun / moon icons that swap inside the thumb.

@base-ui/react1 file

Settings group

switch-08

A grouped list of notification settings, each row with a label, helper text, and a switch.

switch, field1 file

Credit card auto-pay

switch-09

A visual credit card mockup above a labeled switch for enabling automatic monthly payments.

switch, field1 file

Choice cards

switch-10

Clickable add-on rows showing a title, description, price, and a switch, each fully tappable via a wrapping label.

switch, field1 file

React Hook Form + Zod

switch-12

Controller binds the switch to RHF; Zod requires opt-in on submit.

react-hook-form, zod, @hookform/resolvers, sonner1 file

Without dividers

table-03

Borderless rows for a clean, list-like layout.

table1 file

With vertical lines

table-05

Column grid lines via per-cell right borders.

table1 file

Dense

table-06

Compact padding and type for high-density data.

table1 file

Vertical

table-09

Key-value details with row headers down the left.

table1 file

Sticky header

table-10

Header pinned while the capped body scrolls.

table1 file

Resizable columns

table-16

TanStack Table, drag the header edge to resize column widths.

@tanstack/react-table1 file

Row selection

table-18

TanStack Table, row checkboxes with a bulk actions toolbar showing count, clear, and delete.

@tanstack/react-table1 file

From the flx readme

Flexnative

Ship UI. Keep the Taste.

Scale taste across projects. Blocks, patterns, intents, and prompts for builders and AI agents.

Flexnative is open source. Built on shadcn/ui and Tailwind CSS. You get the source, you own it, extend it, ship it.

Not a component catalog. A way to document taste and scale the layers you reuse across projects:

Patterns: reusable UI implementations
Blocks: full page sections with live editing
Illustrations: visuals built with shadcn/ui and Motion
Intents: from problem to decision, with reasoning and code

Tradeoffs written down. Instructions builders and AI agents can follow. Code you keep.

This repo powers ui.flexnative.com.

Documentation

Browse patterns, blocks, illustrations, intents, and docs at ui.flexnative.com.

Development

pnpm dev
pnpm build
pnpm registry:build

Contributing

Please read the contributing guide.

License

Licensed under the AGPL-3.0 license.

flx contents

Hero 12

Product Hero with Demo Panel

Pricing Card

Stat Card

Required Switch Validation

Switch with TanStack Form and Zod

Pagination Table

Numeric Pagination Table

Pagination with Results Summary

Basic Pagination

Compact Pagination

Interactive Pagination Window

Payment Form Card

Image Overlay Card

Notification Settings Card

Product Card

Profile Card

Login Form Card

Select With Inline Label

Select with TanStack Form

React Hook Form Select

Select in Form Field

Select with Label

Custom Border & Background Select

About flx

Also in the flx registry

Multiple

With icons

FAQ

Separated cards

Plus / minus icon

Rich content

Disabled item

Nested

Ghost

Filled trigger

Settings sections

With subtitle

Basic

Fallback initials

Icon fallback

Sizes

Colored fallback

Status badge

Badge with icon

With name

Group

Group with count

Group with tooltip

Loading skeleton

Icon on top

Basic

Variants

With icon

With status dot

Status colors

Count

As link

Removable

With avatar

Sizes

Trend delta

Basic

Variants

Dismissible

Announcement bar

Expandable

With progress

Bento grids 01

Basic

With dropdown

Responsive collapse

As link

Dropdown at end

Basic

Variants

Sizes

With leading icon

With trailing icon