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

bento-grids-02

button

bento-grids-03

badge

bento-grids-04

button

bento-grids-05

bento-grids-06

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

Stat

card-05

KPI value with an icon and a tinted trend badge.

card, badge1 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

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

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-12

button

content-13

content-14

content-15

button

content-16

content-17

content-18

content-19

cta-02

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

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-04

feature-05

button

feature-06

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

hero-15

button

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

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

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

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

lists-01

button, tabs

lists-02

badge

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.

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

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

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

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

Line variant

tabs-02

Underline indicator instead of filled background.

tabs1 file

Vertical line

tabs-04

Vertical orientation with underline indicators, suited for sidebar navigation.

tabs1 file

Disabled tab

tabs-05

One trigger disabled while others stay interactive.

tabs1 file

With icons

tabs-06

Tabs with a small icon placed before each label in the trigger.

lucide-react1 file

In card

tabs-12

Tabs inside a card with stats, member list, and billing summary panels.

tabs, card, separator1 file

Preview and code

tabs-13

Docs-style switch between live preview and code snippet.

lucide-react1 file

Pill track

tabs-15

Rounded pill triggers in a bordered track with cross-fading mood boards.

tabs1 file

Testimonials 01

testimonials-01

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

avatar2 files

Basic

tooltip-01

Default dark tooltip on a button.

tooltip, button1 file

Sides

tooltip-02

Place the tooltip on top, right, bottom, or left.

tooltip, button1 file

With shortcut

tooltip-03

Label paired with a keyboard shortcut badge inside the tooltip.

tooltip, button1 file

On icon button

tooltip-04

Labels icon-only buttons in a toolbar.

lucide-react1 file

Custom delay

tooltip-05

Tooltips that open instantly, after 500ms, or after 1.2s, showing different hover delay behaviors.

tooltip, button1 file

Rich content

tooltip-06

Title plus supporting description in the content.

lucide-react1 file

Colored

tooltip-08

Primary, secondary, and destructive tooltips with arrow color matching the content.

tooltip, button1 file

Side offset

tooltip-10

Adjust the gap between trigger and content.

tooltip, button1 file

Dynamic Field Array

tsf-advanced-01

Start from an empty state, then add and remove teammate rows with per-item validation.

@tanstack/react-form, zod, sonner, lucide-react1 file

Text Input

tsf-fields-02

Native text and email inputs wired with form.Field and Zod validation.

@tanstack/react-form, zod, sonner1 file

From the flx readme

Flexnative

shadcn/ui blocks, patterns and illustrations you paste and own.

Open source blocks for landing pages and marketing sites, patterns for everyday UI and illustrations that bring them to life. Built on shadcn/ui and Tailwind CSS. Add them with one command, then the code is yours.

Website · Blocks · Illustrations · Patterns

Why Flexnative

Flexnative follows the shadcn/ui approach: instead of adding a dependency, you add the source to your project.

You own the code. Every item lands in your project as plain React. Change anything.
Only shadcn/ui underneath. Everything uses shadcn/ui components, Tailwind CSS and lucide-react icons. Nothing else to learn.
Themes and dark mode. Colors come from your theme tokens, so everything matches the rest of your app.
Motion built in. Animations use Motion, with support for reduced motion.
Works with AI agents. Point Claude Code, Cursor or Codex to llms.txt and the @flx registry.

Quick start

Flexnative is listed in the shadcn registry directory as @flx. In a project with shadcn/ui set up:

Category
Hero	The first section of a landing page
Feature	Explain product capabilities
Content	Present information in an organized way
Call to Action	Drive visitors toward a next step
Testimonials	Social proof from customers
Bento grids	A primary tile with supporting cards
Lists	Rows of projects, roles or articles, and labelled details

flx contents

Dashboard Preview Scene

Activity Feed

Analytics Dashboard

Icon Item

Analytics Spot Card

Empty Team

Pricing Tiers List

File List Item

Item With Actions

Inline Edit Settings

Media Card

Revenue Spot Illustration

Settings Sidebar Layout

Notification Stack Illustration

Settings Tabbed Sections

Split Content Section

Icon Feature Grid

Focus Grid Content

Content Grid With Media and CTA

Content 11 Billing Overview

Content Grid Section

Feature Steps Section

Feature List Showcase

Feature Highlights Scroll

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

bento-grids-02

bento-grids-03

bento-grids-04

bento-grids-05

bento-grids-06

Basic

With dropdown

Responsive collapse

As link

Dropdown at end