---
name: "@flx"
slug: "flx"
description: "Flexnative (flx) is an open-source library of UI blocks and patterns for product interfaces, built on shadcn/ui and Tailwind CSS. Blocks cover page sections — hero, content, carousel, showcase, bento-grids, logos, testimonials, scroll effects, and sticky-scroll-media. Patterns provide smaller UI compositions: avatar, breadcrumb, button, dialog, input, item, popover, select, tabs, and tooltip. All components include interactive live previews and are copy-paste installable via the shadcn registry. Free, MIT licensed. Use for: assembling SaaS or product marketing pages quickly by combining pre-built page sections with composable UI patterns, without starting layout from zero."
category: "Blocks & sections (marketing/SaaS)"
tags: ["animation", "blocks", "buttons", "cards", "forms", "icons", "marketing", "media", "navigation", "overlays", "saas"]
framework: "react"
license: "AGPL-3.0"
author: "felipemenezes098"
website: "https://ui.flexnative.com"
github: "https://github.com/felipemenezes098/ui-flx"
registry: "https://ui.flexnative.com/r/registry.json"
pro: false
pro_url: null
github_stars: 27
component_count: 250
generated_at: "2026-07-28T08:00:50.948Z"
---

# @flx

Flexnative (flx) is an open-source library of UI blocks and patterns for product interfaces, built on shadcn/ui and Tailwind CSS. Blocks cover page sections — hero, content, carousel, showcase, bento-grids, logos, testimonials, scroll effects, and sticky-scroll-media. Patterns provide smaller UI compositions: avatar, breadcrumb, button, dialog, input, item, popover, select, tabs, and tooltip. All components include interactive live previews and are copy-paste installable via the shadcn registry. Free, MIT licensed. Use for: assembling SaaS or product marketing pages quickly by combining pre-built page sections with composable UI patterns, without starting layout from zero.

## Links

- Website: https://ui.flexnative.com
- GitHub: https://github.com/felipemenezes098/ui-flx
- Registry JSON: https://ui.flexnative.com/r/registry.json
- Directory page: https://sh4dcn.vercel.app/registry/flx
- This file: https://sh4dcn.vercel.app/md/flx.md

## Install

```sh
# add the whole registry (shadcn CLI)
npx shadcn@latest add https://ui.flexnative.com/r/registry.json
pnpm dlx shadcn@latest add https://ui.flexnative.com/r/registry.json
bunx shadcn@latest add https://ui.flexnative.com/r/registry.json
# clone the source repo
git clone https://github.com/felipemenezes098/ui-flx.git
# fetch the raw registry index
curl -s https://ui.flexnative.com/r/registry.json
```

## Components (250)

| name | type | description | install |
| --- | --- | --- | --- |
| bento-grids-01 | registry:block | Three-column bento: primary tile (two-thirds) with title, description, CTA and media, plus supporting image cards. | `npx shadcn@latest add https://ui.flexnative.com/r/bento-grids-01.json` |
| carousel-01 | registry:block | Auto-scroll carousel that pauses on item hover and reveals title. | `npx shadcn@latest add https://ui.flexnative.com/r/carousel-01.json` |
| carousel-03 | registry:block | A carousel of cards with a title and description. | `npx shadcn@latest add https://ui.flexnative.com/r/carousel-03.json` |
| carousel-02 | registry:block | A carousel of media with a title and description. | `npx shadcn@latest add https://ui.flexnative.com/r/carousel-02.json` |
| content-06 | registry:block | Two-column split with serif headline, supporting copy, optional CTA, and a media panel. | `npx shadcn@latest add https://ui.flexnative.com/r/content-06.json` |
| content-09 | registry:block | Two-column icon card grid with serif section header and subtle entrance motion. | `npx shadcn@latest add https://ui.flexnative.com/r/content-09.json` |
| content-02 | registry:block | A grid of media cards with a section header and item details below each image. | `npx shadcn@latest add https://ui.flexnative.com/r/content-02.json` |
| content-07 | registry:block | Two-column grid with serif header, media on top, copy, and optional CTA per column. | `npx shadcn@latest add https://ui.flexnative.com/r/content-07.json` |
| content-05 | registry:block | A focus grid with items that can be focused and dimmed. | `npx shadcn@latest add https://ui.flexnative.com/r/content-05.json` |
| content-01 | registry:block | List of items: select one to reveal its description and media. | `npx shadcn@latest add https://ui.flexnative.com/r/content-01.json` |
| content-04 | registry:block | Two-column card grid with a serif section header, copy above each image, and subtle entrance motion. | `npx shadcn@latest add https://ui.flexnative.com/r/content-04.json` |
| cta-01 | registry:block | A centered text block with a title, description, and CTA. | `npx shadcn@latest add https://ui.flexnative.com/r/cta-01.json` |
| hero-01 | registry:block | A centered serif hero with a soft gradient wash, pill CTA, and a floating integration cloud. | `npx shadcn@latest add https://ui.flexnative.com/r/hero-01.json` |
| hero-02 | registry:block | A left-aligned serif hero with a media panel: an image backdrop with a floating dashboard mockup on top. | `npx shadcn@latest add https://ui.flexnative.com/r/hero-02.json` |
| hero-03 | registry:block | A centered hero with dual CTAs and an image that fades into the page below the copy. | `npx shadcn@latest add https://ui.flexnative.com/r/hero-03.json` |
| hero-04 | registry:block | A two-column editorial hero with a soft background wash and a layered collage of two overlapping images. | `npx shadcn@latest add https://ui.flexnative.com/r/hero-04.json` |
| hero-05 | registry:block | An editorial hero with a left tagline, right-aligned headline and copy, and a full-width image below. | `npx shadcn@latest add https://ui.flexnative.com/r/hero-05.json` |
| hero-06 | registry:block | A split product hero with dual CTA, a compact logo row, and the Spot 01 illustration. | `npx shadcn@latest add https://ui.flexnative.com/r/hero-06.json` |
| hero-07 | registry:block | An editorial hero with a full-width image above, a top-aligned tagline, and right-aligned headline and copy below. | `npx shadcn@latest add https://ui.flexnative.com/r/hero-07.json` |
| hero-08 | registry:block | A split hero with a bold headline, avatar social proof, and two image cards with invertible overlay text and CTAs. | `npx shadcn@latest add https://ui.flexnative.com/r/hero-08.json` |
| hero-09 | registry:block | A centered real-estate hero with a search bar, a masked architecture image that fades into the page, and a split closing statement. | `npx shadcn@latest add https://ui.flexnative.com/r/hero-09.json` |
| hero-10 | registry:block | A centered hero with a highlighted headline, dual CTAs, social proof, and a fanned collage of three overlapping images. | `npx shadcn@latest add https://ui.flexnative.com/r/hero-10.json` |
| hero-11 | registry:block | A split-copy hero with a light product studio mock — issue feed, properties, and a floating agent panel that fades into the page. | `npx shadcn@latest add https://ui.flexnative.com/r/hero-11.json` |
| hero-12 | registry:block | A full-bleed image hero with an oversized name, an established label, and a floating pill CTA anchored to the corner. | `npx shadcn@latest add https://ui.flexnative.com/r/hero-12.json` |
| hero-13 | registry:block | Asymmetric editorial hero with serif brand title, supporting copy, and two overlapping media frames. | `npx shadcn@latest add https://ui.flexnative.com/r/hero-13.json` |
| logos-01 | registry:block | Logo carousel with auto-scroll, edge gradient and minimalist style. | `npx shadcn@latest add https://ui.flexnative.com/r/logos-01.json` |
| scroll-01 | registry:block | Sticky media that changes as you scroll through text content. | `npx shadcn@latest add https://ui.flexnative.com/r/scroll-01.json` |
| cta | registry:block | Shared CTA component with link and button variant | `npx shadcn@latest add https://ui.flexnative.com/r/cta.json` |
| dynamic-icon | registry:block | A dynamic icon component with a name and size. | `npx shadcn@latest add https://ui.flexnative.com/r/dynamic-icon.json` |
| testimonials-01 | registry:block | A single testimonial with quote, avatar, author name and role. | `npx shadcn@latest add https://ui.flexnative.com/r/testimonials-01.json` |
| accordion-01 | registry:block | Only one section open at a time, type="single" collapsible. The default behavior. | `npx shadcn@latest add https://ui.flexnative.com/r/accordion-01.json` |
| accordion-02 | registry:block | type="multiple" keeps several sections open at once. | `npx shadcn@latest add https://ui.flexnative.com/r/accordion-02.json` |
| accordion-03 | registry:block | Leading icon beside each trigger label. | `npx shadcn@latest add https://ui.flexnative.com/r/accordion-03.json` |
| accordion-04 | registry:block | A titled question-and-answer list. | `npx shadcn@latest add https://ui.flexnative.com/r/accordion-04.json` |
| accordion-05 | registry:block | Each item is a bordered card with spacing between them. | `npx shadcn@latest add https://ui.flexnative.com/r/accordion-05.json` |
| accordion-06 | registry:block | Plus icon on each trigger that turns into a minus when open, instead of a chevron. | `npx shadcn@latest add https://ui.flexnative.com/r/accordion-06.json` |
| accordion-07 | registry:block | Rotating chevron placed before the label instead of after it. | `npx shadcn@latest add https://ui.flexnative.com/r/accordion-07.json` |
| accordion-09 | registry:block | Lists, links, and a button inside the panel body. | `npx shadcn@latest add https://ui.flexnative.com/r/accordion-09.json` |
| accordion-10 | registry:block | One trigger disabled while the others stay interactive. | `npx shadcn@latest add https://ui.flexnative.com/r/accordion-10.json` |
| accordion-11 | registry:block | An accordion rendered inside another panel body. | `npx shadcn@latest add https://ui.flexnative.com/r/accordion-11.json` |
| accordion-12 | registry:block | Borderless minimal rows with an active color on open. | `npx shadcn@latest add https://ui.flexnative.com/r/accordion-12.json` |
| accordion-13 | registry:block | Each trigger sits on a muted, rounded background. | `npx shadcn@latest add https://ui.flexnative.com/r/accordion-13.json` |
| accordion-14 | registry:block | Controlled value with expand-all / collapse-all buttons. | `npx shadcn@latest add https://ui.flexnative.com/r/accordion-14.json` |
| accordion-15 | registry:block | Grouped switch rows revealed inside each panel. | `npx shadcn@latest add https://ui.flexnative.com/r/accordion-15.json` |
| accordion-16 | registry:block | Two-line trigger pairing a title with helper text. | `npx shadcn@latest add https://ui.flexnative.com/r/accordion-16.json` |
| avatar-01 | registry:block | Image avatar with an initials fallback. | `npx shadcn@latest add https://ui.flexnative.com/r/avatar-01.json` |
| avatar-02 | registry:block | Missing image falls back to initials. | `npx shadcn@latest add https://ui.flexnative.com/r/avatar-02.json` |
| avatar-03 | registry:block | Generic user icon when there is no image or name. | `npx shadcn@latest add https://ui.flexnative.com/r/avatar-03.json` |
| avatar-04 | registry:block | Small, default, and large sizes side-by-side. | `npx shadcn@latest add https://ui.flexnative.com/r/avatar-04.json` |
| avatar-05 | registry:block | Tinted initials fallbacks using semantic tokens. | `npx shadcn@latest add https://ui.flexnative.com/r/avatar-05.json` |
| avatar-06 | registry:block | Presence dot in the corner showing online, away, or offline. | `npx shadcn@latest add https://ui.flexnative.com/r/avatar-06.json` |
| avatar-07 | registry:block | Verified check icon inside the AvatarBadge. | `npx shadcn@latest add https://ui.flexnative.com/r/avatar-07.json` |
| avatar-08 | registry:block | Avatar beside a name and email, forming a user row. | `npx shadcn@latest add https://ui.flexnative.com/r/avatar-08.json` |
| avatar-09 | registry:block | Overlapping AvatarGroup stack of members. | `npx shadcn@latest add https://ui.flexnative.com/r/avatar-09.json` |
| avatar-10 | registry:block | Overlapping group with a +N count for the remaining members. | `npx shadcn@latest add https://ui.flexnative.com/r/avatar-10.json` |
| avatar-11 | registry:block | Hover each avatar in the group to reveal its name. | `npx shadcn@latest add https://ui.flexnative.com/r/avatar-11.json` |
| avatar-12 | registry:block | Skeleton placeholder while the avatar loads. | `npx shadcn@latest add https://ui.flexnative.com/r/avatar-12.json` |
| avatar-13 | registry:block | Icon badge pinned to the top-right corner. | `npx shadcn@latest add https://ui.flexnative.com/r/avatar-13.json` |
| badge-01 | registry:block | A single default badge. | `npx shadcn@latest add https://ui.flexnative.com/r/badge-01.json` |
| badge-02 | registry:block | All six variants side-by-side: default, secondary, destructive, outline, ghost, link. | `npx shadcn@latest add https://ui.flexnative.com/r/badge-02.json` |
| badge-03 | registry:block | Leading verified icon before the label. | `npx shadcn@latest add https://ui.flexnative.com/r/badge-03.json` |
| badge-04 | registry:block | A colored presence dot beside an outline label. | `npx shadcn@latest add https://ui.flexnative.com/r/badge-04.json` |
| badge-05 | registry:block | Tinted success, warning, error, and info states. | `npx shadcn@latest add https://ui.flexnative.com/r/badge-05.json` |
| badge-06 | registry:block | Pill-shaped numeric counts with tabular figures. | `npx shadcn@latest add https://ui.flexnative.com/r/badge-06.json` |
| badge-07 | registry:block | render prop renders the badge as an anchor with a trailing icon. | `npx shadcn@latest add https://ui.flexnative.com/r/badge-07.json` |
| badge-08 | registry:block | Dismissible tag chips with a trailing remove button. | `npx shadcn@latest add https://ui.flexnative.com/r/badge-08.json` |
| badge-09 | registry:block | Assignee chip with a leading avatar inside the badge. | `npx shadcn@latest add https://ui.flexnative.com/r/badge-09.json` |
| badge-10 | registry:block | Small, default, and large sizes via className. | `npx shadcn@latest add https://ui.flexnative.com/r/badge-10.json` |
| badge-11 | registry:block | Up and down arrows with tinted gain / loss percentages. | `npx shadcn@latest add https://ui.flexnative.com/r/badge-11.json` |
| badge-12 | registry:block | Round icon-only badges across variants. | `npx shadcn@latest add https://ui.flexnative.com/r/badge-12.json` |
| badge-13 | registry:block | A wrapping group of outline badges as tags. | `npx shadcn@latest add https://ui.flexnative.com/r/badge-13.json` |
| banner-01 | registry:block | Icon, message, and a subtle bordered surface. | `npx shadcn@latest add https://ui.flexnative.com/r/banner-01.json` |
| banner-02 | registry:block | Info, success, warning, and error tones stacked. | `npx shadcn@latest add https://ui.flexnative.com/r/banner-02.json` |
| banner-03 | registry:block | A close button hides the banner with a restore link. | `npx shadcn@latest add https://ui.flexnative.com/r/banner-03.json` |
| banner-04 | registry:block | Message paired with Later and Update now buttons. | `npx shadcn@latest add https://ui.flexnative.com/r/banner-04.json` |
| banner-06 | registry:block | Full-width gradient promo with a New tag and arrow. | `npx shadcn@latest add https://ui.flexnative.com/r/banner-06.json` |
| banner-07 | registry:block | Collapsible release notes that reveal highlights. | `npx shadcn@latest add https://ui.flexnative.com/r/banner-07.json` |
| banner-09 | registry:block | Amber system notice with a pulsing status dot. | `npx shadcn@latest add https://ui.flexnative.com/r/banner-09.json` |
| banner-11 | registry:block | Blue prompt with a Resend email button that switches to a sent confirmation. | `npx shadcn@latest add https://ui.flexnative.com/r/banner-11.json` |
| banner-12 | registry:block | A list of dismissible notices, each removed on its own. | `npx shadcn@latest add https://ui.flexnative.com/r/banner-12.json` |
| banner-14 | registry:block | Live import banner with a spinner and a progress bar. | `npx shadcn@latest add https://ui.flexnative.com/r/banner-14.json` |
| breadcrumb-01 | registry:block | Links with a current page and chevron separators. | `npx shadcn@latest add https://ui.flexnative.com/r/breadcrumb-01.json` |
| breadcrumb-02 | registry:block | Each crumb prefixed with a small icon, such as a house, folder, or file. | `npx shadcn@latest add https://ui.flexnative.com/r/breadcrumb-02.json` |
| breadcrumb-03 | registry:block | Swap the chevron for a slash via separator children. | `npx shadcn@latest add https://ui.flexnative.com/r/breadcrumb-03.json` |
| breadcrumb-04 | registry:block | Lighter middle dot divider between crumbs. | `npx shadcn@latest add https://ui.flexnative.com/r/breadcrumb-04.json` |
| breadcrumb-05 | registry:block | Middle levels replaced by a static ellipsis icon, showing only the first and last crumbs. | `npx shadcn@latest add https://ui.flexnative.com/r/breadcrumb-05.json` |
| breadcrumb-06 | registry:block | Ghost icon Button opens a menu of the hidden levels. | `npx shadcn@latest add https://ui.flexnative.com/r/breadcrumb-06.json` |
| breadcrumb-07 | registry:block | Dropdown on small screens, full inline path from sm up. | `npx shadcn@latest add https://ui.flexnative.com/r/breadcrumb-07.json` |
| breadcrumb-08 | registry:block | Breadcrumb links that open in a new tab, with an external-link icon on the outbound crumb. | `npx shadcn@latest add https://ui.flexnative.com/r/breadcrumb-08.json` |
| breadcrumb-09 | registry:block | Last crumb is a Button switcher for sibling pages. | `npx shadcn@latest add https://ui.flexnative.com/r/breadcrumb-09.json` |
| button-01 | registry:block | Default button with text label. | `npx shadcn@latest add https://ui.flexnative.com/r/button-01.json` |
| button-02 | registry:block | All six variants side-by-side: default, secondary, outline, ghost, destructive, link. | `npx shadcn@latest add https://ui.flexnative.com/r/button-02.json` |
| button-03 | registry:block | Extra small, small, default, and large sizes. | `npx shadcn@latest add https://ui.flexnative.com/r/button-03.json` |
| button-04 | registry:block | Button with an icon placed before the text label. | `npx shadcn@latest add https://ui.flexnative.com/r/button-04.json` |
| button-05 | registry:block | Button with an icon placed after the text label. | `npx shadcn@latest add https://ui.flexnative.com/r/button-05.json` |
| button-06 | registry:block | Square icon-only buttons in every icon size. | `npx shadcn@latest add https://ui.flexnative.com/r/button-06.json` |
| button-07 | registry:block | Button in the disabled state, visually dimmed and non-interactive. | `npx shadcn@latest add https://ui.flexnative.com/r/button-07.json` |
| button-08 | registry:block | Button with a spinning loader icon and label, indicating an in-progress async action. | `npx shadcn@latest add https://ui.flexnative.com/r/button-08.json` |
| button-09 | registry:block | Link-styled button that navigates to an external URL, rendered as an anchor with a trailing external-link icon. | `npx shadcn@latest add https://ui.flexnative.com/r/button-09.json` |
| button-10 | registry:block | User picker style button with a small avatar image leading the text label. | `npx shadcn@latest add https://ui.flexnative.com/r/button-10.json` |
| button-11 | registry:block | CTA arrow nudges right on hover. | `npx shadcn@latest add https://ui.flexnative.com/r/button-11.json` |
| button-12 | registry:block | Notification count badge overlapping an icon button. | `npx shadcn@latest add https://ui.flexnative.com/r/button-12.json` |
| button-13 | registry:block | Icon and label swap to a check on copy. | `npx shadcn@latest add https://ui.flexnative.com/r/button-13.json` |
| button-14 | registry:block | Refresh button whose icon rotates a full 360° on each click. | `npx shadcn@latest add https://ui.flexnative.com/r/button-14.json` |
| button-15 | registry:block | Three bars morph into an X on press. | `npx shadcn@latest add https://ui.flexnative.com/r/button-15.json` |
| button-16 | registry:block | Horizontal row of buttons with merged borders, used for segmented controls like date range pickers. | `npx shadcn@latest add https://ui.flexnative.com/r/button-16.json` |
| button-17 | registry:block | Stacked column of buttons with merged borders, used for vertical navigation menus. | `npx shadcn@latest add https://ui.flexnative.com/r/button-17.json` |
| button-18 | registry:block | Compact toolbar of icon-only buttons with merged borders, used for text formatting actions. | `npx shadcn@latest add https://ui.flexnative.com/r/button-18.json` |
| button-20 | registry:block | Static text label leading a group of action buttons, useful for labelled sort or filter controls. | `npx shadcn@latest add https://ui.flexnative.com/r/button-20.json` |
| button-21 | registry:block | Primary action button paired with a chevron that opens a dropdown of secondary actions. | `npx shadcn@latest add https://ui.flexnative.com/r/button-21.json` |
| button-22 | registry:block | Prev arrow, numbered page buttons, and Next arrow in a merged-border row. | `npx shadcn@latest add https://ui.flexnative.com/r/button-22.json` |
| button-23 | registry:block | Read-only text value paired with a trailing icon button that copies it to the clipboard, with an animated check on success. | `npx shadcn@latest add https://ui.flexnative.com/r/button-23.json` |
| button-24 | registry:block | Merged-border button row where one step is visually disabled and non-interactive. | `npx shadcn@latest add https://ui.flexnative.com/r/button-24.json` |
| button-25 | registry:block | Cancel + Delete spaced action pair. | `npx shadcn@latest add https://ui.flexnative.com/r/button-25.json` |
| button-26 | registry:block | Sort dropdown paired with a direction-toggle icon button in a merged-border row. | `npx shadcn@latest add https://ui.flexnative.com/r/button-26.json` |
| button-27 | registry:block | Color swatch button that opens a grid of color swatches, paired with a hex value label in a merged-border row. | `npx shadcn@latest add https://ui.flexnative.com/r/button-27.json` |
| card-01 | registry:block | Header, action, content, and a bordered footer. | `npx shadcn@latest add https://ui.flexnative.com/r/card-01.json` |
| card-02 | registry:block | Top media banner above title, body, and a CTA footer. | `npx shadcn@latest add https://ui.flexnative.com/r/card-02.json` |
| card-03 | registry:block | Image on the left beside a category, title, and link. | `npx shadcn@latest add https://ui.flexnative.com/r/card-03.json` |
| card-04 | registry:block | Three-dot icon button in the header corner opens a dropdown with rename, share, and delete options. | `npx shadcn@latest add https://ui.flexnative.com/r/card-04.json` |
| card-05 | registry:block | KPI value with an icon and a tinted trend badge. | `npx shadcn@latest add https://ui.flexnative.com/r/card-05.json` |
| card-06 | registry:block | Email and password fields with sign-in and OAuth buttons. | `npx shadcn@latest add https://ui.flexnative.com/r/card-06.json` |
| card-07 | registry:block | A footer button launches a modal with subscription detail. | `npx shadcn@latest add https://ui.flexnative.com/r/card-07.json` |
| card-08 | registry:block | Centered avatar, stats row, and follow / message actions. | `npx shadcn@latest add https://ui.flexnative.com/r/card-08.json` |
| card-09 | registry:block | Highlighted plan with a Popular badge and feature checklist. | `npx shadcn@latest add https://ui.flexnative.com/r/card-09.json` |
| card-10 | registry:block | Square image with a sale badge, price, and add-to-cart. | `npx shadcn@latest add https://ui.flexnative.com/r/card-10.json` |
| card-11 | registry:block | Horizontal field rows each toggled with a switch. | `npx shadcn@latest add https://ui.flexnative.com/r/card-11.json` |
| card-12 | registry:block | Clickable plan cards with a ring and check on the active one. | `npx shadcn@latest add https://ui.flexnative.com/r/card-12.json` |
| card-13 | registry:block | Text and a CTA over a gradient-darkened cover image. | `npx shadcn@latest add https://ui.flexnative.com/r/card-13.json` |
| card-14 | registry:block | Name on card, card number with icon, expiry, CVC, and country select fields with a pay button. | `npx shadcn@latest add https://ui.flexnative.com/r/card-14.json` |
| checkbox-01 | registry:block | Single checkbox with a label. | `npx shadcn@latest add https://ui.flexnative.com/r/checkbox-01.json` |
| checkbox-02 | registry:block | Checkbox with a label and helper description. | `npx shadcn@latest add https://ui.flexnative.com/r/checkbox-02.json` |
| checkbox-03 | registry:block | Disabled unchecked and disabled checked states. | `npx shadcn@latest add https://ui.flexnative.com/r/checkbox-03.json` |
| checkbox-04 | registry:block | Grouped list of notification checkboxes, each with a label and helper description, inside a labelled fieldset. | `npx shadcn@latest add https://ui.flexnative.com/r/checkbox-04.json` |
| checkbox-06 | registry:block | Parent checkbox with an indeterminate mixed state. | `npx shadcn@latest add https://ui.flexnative.com/r/checkbox-06.json` |
| checkbox-07 | registry:block | Multi-level file tree; parents derive checked / indeterminate from children. | `npx shadcn@latest add https://ui.flexnative.com/r/checkbox-07.json` |
| checkbox-08 | registry:block | Bordered add-on cards that highlight when checked. | `npx shadcn@latest add https://ui.flexnative.com/r/checkbox-08.json` |
| checkbox-09 | registry:block | Selectable saved credit cards with brand and last four. | `npx shadcn@latest add https://ui.flexnative.com/r/checkbox-09.json` |
| checkbox-10 | registry:block | Data table with a select-all header, per-row checkboxes, and a count. | `npx shadcn@latest add https://ui.flexnative.com/r/checkbox-10.json` |
| checkbox-11 | registry:block | Checkbox with an inline error message that appears when the form is submitted without checking it. | `npx shadcn@latest add https://ui.flexnative.com/r/checkbox-11.json` |
| checkbox-12 | registry:block | Controller binds a checkbox group to React Hook Form; Zod requires at least one selection. | `npx shadcn@latest add https://ui.flexnative.com/r/checkbox-12.json` |
| checkbox-13 | registry:block | form.Field wires a checkbox group to TanStack Form; Zod validates on submit and shows an error when none are selected. | `npx shadcn@latest add https://ui.flexnative.com/r/checkbox-13.json` |
| collapsible-01 | registry:block | Canonical starred-repos toggle with a chevron trigger. | `npx shadcn@latest add https://ui.flexnative.com/r/collapsible-01.json` |
| collapsible-02 | registry:block | Stacked question rows; each answer expands with an animated chevron. | `npx shadcn@latest add https://ui.flexnative.com/r/collapsible-02.json` |
| collapsible-03 | registry:block | Nested folders built from collapsible rows, with folder icons that swap on open. | `npx shadcn@latest add https://ui.flexnative.com/r/collapsible-03.json` |
| collapsible-04 | registry:block | Truncated paragraph reveals the rest; trigger label swaps to Show less. | `npx shadcn@latest add https://ui.flexnative.com/r/collapsible-04.json` |
| collapsible-05 | registry:block | Collapsible navigation sections with sub-items and a rotating chevron. | `npx shadcn@latest add https://ui.flexnative.com/r/collapsible-05.json` |
| collapsible-06 | registry:block | Form reveals extra fields behind an Advanced options toggle. | `npx shadcn@latest add https://ui.flexnative.com/r/collapsible-06.json` |
| command-01 | registry:block | Canonical command menu with grouped items, icons, and shortcuts. | `npx shadcn@latest add https://ui.flexnative.com/r/command-01.json` |
| command-02 | registry:block | Spotlight-style ⌘K palette toggled by a button or keyboard shortcut. | `npx shadcn@latest add https://ui.flexnative.com/r/command-02.json` |
| command-03 | registry:block | Rich search dialog with recent, pages, and people plus a hint footer. | `npx shadcn@latest add https://ui.flexnative.com/r/command-03.json` |
| command-04 | registry:block | Debounced search with skeleton rows while loading, an empty state, and shouldFilter disabled for server-driven results. | `npx shadcn@latest add https://ui.flexnative.com/r/command-04.json` |
| command-05 | registry:block | Popover + Command framework picker with a check mark. | `npx shadcn@latest add https://ui.flexnative.com/r/command-05.json` |
| command-06 | registry:block | Selected value shows an inline X that clears without reopening. | `npx shadcn@latest add https://ui.flexnative.com/r/command-06.json` |
| command-07 | registry:block | Multi-select showing every choice as a removable badge chip in the trigger. | `npx shadcn@latest add https://ui.flexnative.com/r/command-07.json` |
| command-14 | registry:block | Trigger shows "first, +N" with a separate button to clear all. | `npx shadcn@latest add https://ui.flexnative.com/r/command-14.json` |
| command-15 | registry:block | Dashed trigger with count badges, checkbox rows, facet counts, and a clear footer. | `npx shadcn@latest add https://ui.flexnative.com/r/command-15.json` |
| command-08 | registry:block | Options split into labeled groups with separators, demonstrated with timezones organized by region. | `npx shadcn@latest add https://ui.flexnative.com/r/command-08.json` |
| command-09 | registry:block | Avatars with name and email subtext in the trigger and options. | `npx shadcn@latest add https://ui.flexnative.com/r/command-09.json` |
| command-10 | registry:block | Ghost trigger with a colored status dot, issue-tracker style. | `npx shadcn@latest add https://ui.flexnative.com/r/command-10.json` |
| command-11 | registry:block | Combobox composed with an accessible field Label. | `npx shadcn@latest add https://ui.flexnative.com/r/command-11.json` |
| command-12 | registry:block | Controller binds the combobox to RHF; Zod resolver drives FieldError on submit. | `npx shadcn@latest add https://ui.flexnative.com/r/command-12.json` |
| command-13 | registry:block | form.Field wires the combobox; Zod onSubmit validator surfaces FieldError when touched. | `npx shadcn@latest add https://ui.flexnative.com/r/command-13.json` |
| dialog-01 | registry:block | Polished yes/no with icon and clear hierarchy. | `npx shadcn@latest add https://ui.flexnative.com/r/dialog-01.json` |
| dialog-02 | registry:block | FieldGroup form with Save and Cancel footer. | `npx shadcn@latest add https://ui.flexnative.com/r/dialog-02.json` |
| dialog-03 | registry:block | Destructive warning with icon and emphasized copy. | `npx shadcn@latest add https://ui.flexnative.com/r/dialog-03.json` |
| dialog-04 | registry:block | Long scroll body; Accept and Decline pinned footer. | `npx shadcn@latest add https://ui.flexnative.com/r/dialog-04.json` |
| dialog-05 | registry:block | Readonly URL with copy control; minimal footer. | `npx shadcn@latest add https://ui.flexnative.com/r/dialog-05.json` |
| dialog-06 | registry:block | Header fixed; scrollable changelog-style body. | `npx shadcn@latest add https://ui.flexnative.com/r/dialog-06.json` |
| dialog-08 | registry:block | 6-digit InputOTP with separator; Verify footer. | `npx shadcn@latest add https://ui.flexnative.com/r/dialog-08.json` |
| dialog-09 | registry:block | Compact hero image, title, and description; dual CTAs. | `npx shadcn@latest add https://ui.flexnative.com/r/dialog-09.json` |
| dialog-10 | registry:block | No corner close button; dismiss only through the footer. | `npx shadcn@latest add https://ui.flexnative.com/r/dialog-10.json` |
| dialog-11 | registry:block | Scrollable avatar rows with selection; Invite footer. | `npx shadcn@latest add https://ui.flexnative.com/r/dialog-11.json` |
| dialog-12 | registry:block | Completion check icon and Continue action. | `npx shadcn@latest add https://ui.flexnative.com/r/dialog-12.json` |
| dialog-13 | registry:block | Type delete to enable destructive button. | `npx shadcn@latest add https://ui.flexnative.com/r/dialog-13.json` |
| dialog-14 | registry:block | Notifications and Security blocks via Separator. | `npx shadcn@latest add https://ui.flexnative.com/r/dialog-14.json` |
| dialog-15 | registry:block | Thumbnail grid with selection ring. | `npx shadcn@latest add https://ui.flexnative.com/r/dialog-15.json` |
| dialog-16 | registry:block | Icon header plus email field. | `npx shadcn@latest add https://ui.flexnative.com/r/dialog-16.json` |
| dialog-17 | registry:block | Many fields in scroll; footer-only sticky. | `npx shadcn@latest add https://ui.flexnative.com/r/dialog-17.json` |
| dialog-18 | registry:block | Full-width footer buttons for mobile-friendly CTAs. | `npx shadcn@latest add https://ui.flexnative.com/r/dialog-18.json` |
| dialog-19 | registry:block | Dialog form with RHF, Zod resolver, and FieldError on invalid fields. | `npx shadcn@latest add https://ui.flexnative.com/r/dialog-19.json` |
| dialog-20 | registry:block | Dialog form with TanStack Form and Zod onSubmit validation. | `npx shadcn@latest add https://ui.flexnative.com/r/dialog-20.json` |
| dialog-21 | registry:block | Dialog stacked inside another dialog, e.g. avatar picker from profile. | `npx shadcn@latest add https://ui.flexnative.com/r/dialog-21.json` |
| dialog-22 | registry:block | Dialog triggered by a DropdownMenuItem with onSelect preventDefault. | `npx shadcn@latest add https://ui.flexnative.com/r/dialog-22.json` |
| dropdown-01 | registry:block | Label, separator, and a list of action items. | `npx shadcn@latest add https://ui.flexnative.com/r/dropdown-01.json` |
| dropdown-02 | registry:block | Leading icons paired with trailing keyboard shortcuts. | `npx shadcn@latest add https://ui.flexnative.com/r/dropdown-02.json` |
| dropdown-03 | registry:block | Multiple labeled groups divided by separators. | `npx shadcn@latest add https://ui.flexnative.com/r/dropdown-03.json` |
| dropdown-04 | registry:block | A red destructive Delete action separated from the regular items. | `npx shadcn@latest add https://ui.flexnative.com/r/dropdown-04.json` |
| dropdown-05 | registry:block | Non-interactive items dimmed with the disabled prop. | `npx shadcn@latest add https://ui.flexnative.com/r/dropdown-05.json` |
| dropdown-06 | registry:block | Toggle multiple view options with checkbox items. | `npx shadcn@latest add https://ui.flexnative.com/r/dropdown-06.json` |
| dropdown-07 | registry:block | Radio items that keep exactly one option selected at a time. | `npx shadcn@latest add https://ui.flexnative.com/r/dropdown-07.json` |
| dropdown-08 | registry:block | A menu item that reveals a nested flyout panel with more options. | `npx shadcn@latest add https://ui.flexnative.com/r/dropdown-08.json` |
| dropdown-09 | registry:block | Avatar trigger with a name and email header block. | `npx shadcn@latest add https://ui.flexnative.com/r/dropdown-09.json` |
| dropdown-10 | registry:block | Ghost ellipsis trigger opens a compact actions menu. | `npx shadcn@latest add https://ui.flexnative.com/r/dropdown-10.json` |
| dropdown-11 | registry:block | Per-row ellipsis menu with edit, copy, and remove. | `npx shadcn@latest add https://ui.flexnative.com/r/dropdown-11.json` |
| dropdown-12 | registry:block | Align start or end and open the menu to the side. | `npx shadcn@latest add https://ui.flexnative.com/r/dropdown-12.json` |
| dropdown-13 | registry:block | Menu whose open/closed state is managed externally and reflected in the trigger label. | `npx shadcn@latest add https://ui.flexnative.com/r/dropdown-13.json` |
| dropdown-14 | registry:block | Radio group toggling light, dark, and system themes. | `npx shadcn@latest add https://ui.flexnative.com/r/dropdown-14.json` |
| dropdown-15 | registry:block | Checkbox items with a count badge and a clear action. | `npx shadcn@latest add https://ui.flexnative.com/r/dropdown-15.json` |
| dropdown-16 | registry:block | Bell trigger with an unread badge and an activity list. | `npx shadcn@latest add https://ui.flexnative.com/r/dropdown-16.json` |
| dropdown-17 | registry:block | A menu item opens a controlled confirmation dialog. | `npx shadcn@latest add https://ui.flexnative.com/r/dropdown-17.json` |
| dropdown-18 | registry:block | Controller binds a radio group to RHF; Zod requires a selection. | `npx shadcn@latest add https://ui.flexnative.com/r/dropdown-18.json` |
| dropdown-19 | registry:block | form.Field wires the radio group; Zod onSubmit surfaces FieldError. | `npx shadcn@latest add https://ui.flexnative.com/r/dropdown-19.json` |
| empty-01 | registry:block | Icon, title, and description for an empty list. | `npx shadcn@latest add https://ui.flexnative.com/r/empty-01.json` |
| empty-02 | registry:block | First-run state with primary and secondary CTAs. | `npx shadcn@latest add https://ui.flexnative.com/r/empty-02.json` |
| empty-03 | registry:block | Search empty state with a clear-filters action. | `npx shadcn@latest add https://ui.flexnative.com/r/empty-03.json` |
| empty-04 | registry:block | Bordered empty team card with an avatar stack and invite. | `npx shadcn@latest add https://ui.flexnative.com/r/empty-04.json` |
| empty-05 | registry:block | Empty inbox state composed inside a Dialog. | `npx shadcn@latest add https://ui.flexnative.com/r/empty-05.json` |
| input-01 | registry:block | Plain text input with a placeholder, no addons. | `npx shadcn@latest add https://ui.flexnative.com/r/input-01.json` |
| input-02 | registry:block | Input with trailing search icon addon. | `npx shadcn@latest add https://ui.flexnative.com/r/input-02.json` |
| input-03 | registry:block | Text input rendered in a disabled, non-interactive state. | `npx shadcn@latest add https://ui.flexnative.com/r/input-03.json` |
| input-04 | registry:block | Password input with a trailing eye-off icon to indicate visibility toggle. | `npx shadcn@latest add https://ui.flexnative.com/r/input-04.json` |
| input-05 | registry:block | URL input with a fixed "https://" prefix and ".com" suffix text addons. | `npx shadcn@latest add https://ui.flexnative.com/r/input-05.json` |
| input-06 | registry:block | Spinning loader in the trailing addon while searching. | `npx shadcn@latest add https://ui.flexnative.com/r/input-06.json` |
| input-07 | registry:block | Clear button appears in the trailing addon when the field has text. | `npx shadcn@latest add https://ui.flexnative.com/r/input-07.json` |
| input-08 | registry:block | Help icon in the trailing addon opens a tooltip on hover. | `npx shadcn@latest add https://ui.flexnative.com/r/input-08.json` |
| input-09 | registry:block | Info button in the trailing addon opens a popover with helper content. | `npx shadcn@latest add https://ui.flexnative.com/r/input-09.json` |
| input-10 | registry:block | Trailing addon button opens a menu to choose search scope. | `npx shadcn@latest add https://ui.flexnative.com/r/input-10.json` |
| input-11 | registry:block | Labeled text input with a supporting description line below the field. | `npx shadcn@latest add https://ui.flexnative.com/r/input-11.json` |
| input-12 | registry:block | Controller binds Input to RHF; Zod resolver drives FieldError on submit. | `npx shadcn@latest add https://ui.flexnative.com/r/input-12.json` |
| input-13 | registry:block | form.Field wires Input; Zod onSubmit validator surfaces FieldError when touched. | `npx shadcn@latest add https://ui.flexnative.com/r/input-13.json` |
| input-14 | registry:block | ButtonGroup pairs a text input with a trailing search action button. | `npx shadcn@latest add https://ui.flexnative.com/r/input-14.json` |
| input-16 | registry:block | Username field with a fixed @company.com suffix addon, locking the email domain. | `npx shadcn@latest add https://ui.flexnative.com/r/input-16.json` |
| input-15 | registry:block | Nested ButtonGroup: currency Select, amount input, and submit icon button. | `npx shadcn@latest add https://ui.flexnative.com/r/input-15.json` |
| input-17 | registry:block | Attach button plus InputGroup message field and send action in a ButtonGroup. | `npx shadcn@latest add https://ui.flexnative.com/r/input-17.json` |
| item-02 | registry:block | Title plus supporting description. | `npx shadcn@latest add https://ui.flexnative.com/r/item-02.json` |
| item-03 | registry:block | Default, outline, and muted variants side-by-side. | `npx shadcn@latest add https://ui.flexnative.com/r/item-03.json` |
| item-04 | registry:block | Default, sm, and xs sizes side-by-side. | `npx shadcn@latest add https://ui.flexnative.com/r/item-04.json` |
| item-05 | registry:block | Leading icon placed before the title and description. | `npx shadcn@latest add https://ui.flexnative.com/r/item-05.json` |
| item-06 | registry:block | User avatar photo placed before the name and subtitle. | `npx shadcn@latest add https://ui.flexnative.com/r/item-06.json` |
| item-07 | registry:block | Small image thumbnail placed before the title and subtitle. | `npx shadcn@latest add https://ui.flexnative.com/r/item-07.json` |
| item-08 | registry:block | Avatar, name, role, and a trailing action button. | `npx shadcn@latest add https://ui.flexnative.com/r/item-08.json` |
| item-09 | registry:block | Status badge above the title and a metadata row below the description. | `npx shadcn@latest add https://ui.flexnative.com/r/item-09.json` |
| item-10 | registry:block | The entire row is clickable, navigating to a URL with a trailing arrow icon. | `npx shadcn@latest add https://ui.flexnative.com/r/item-10.json` |
| item-11 | registry:block | Multiple rows grouped together with thin dividers between each row. | `npx shadcn@latest add https://ui.flexnative.com/r/item-11.json` |
| item-12 | registry:block | Avatars with name, role, and Follow action per row. | `npx shadcn@latest add https://ui.flexnative.com/r/item-12.json` |
| item-13 | registry:block | Leading icon, title with an unread dot indicator, and a trailing timestamp. | `npx shadcn@latest add https://ui.flexnative.com/r/item-13.json` |
| item-14 | registry:block | File icon, name, size metadata, and a trailing overflow menu with actions per row. | `npx shadcn@latest add https://ui.flexnative.com/r/item-14.json` |
| item-15 | registry:block | Title and description with a trailing Switch. | `npx shadcn@latest add https://ui.flexnative.com/r/item-15.json` |
| item-16 | registry:block | Brand icon, status badge in title, connect Switch. | `npx shadcn@latest add https://ui.flexnative.com/r/item-16.json` |
| item-17 | registry:block | Stacked KPI rows with label, value, and trend delta. | `npx shadcn@latest add https://ui.flexnative.com/r/item-17.json` |
| item-18 | registry:block | Stacked tier rows with Popular badge, price, and CTA button. | `npx shadcn@latest add https://ui.flexnative.com/r/item-18.json` |
| item-19 | registry:block | Icon timeline rows with relative time footer. | `npx shadcn@latest add https://ui.flexnative.com/r/item-19.json` |
| item-20 | registry:block | Compact user avatar and email placed at the top of a dropdown menu. | `npx shadcn@latest add https://ui.flexnative.com/r/item-20.json` |
| item-21 | registry:block | File rows with image thumbnails displayed inside a floating popover panel. | `npx shadcn@latest add https://ui.flexnative.com/r/item-21.json` |
| item-24 | registry:block | Overlapping avatar stack above an empty-state message with an invite button. | `npx shadcn@latest add https://ui.flexnative.com/r/item-24.json` |
| pagination-01 | registry:block | Numbers with ellipsis, previous, and next links. | `npx shadcn@latest add https://ui.flexnative.com/r/pagination-01.json` |
| pagination-02 | registry:block | Inline numbers from sm up, "Page X of Y" on mobile. | `npx shadcn@latest add https://ui.flexnative.com/r/pagination-02.json` |
| pagination-03 | registry:block | Stateful current page with a sliding ellipsis range. | `npx shadcn@latest add https://ui.flexnative.com/r/pagination-03.json` |
| pagination-04 | registry:block | Page-size select with first, prev, next, and last. | `npx shadcn@latest add https://ui.flexnative.com/r/pagination-04.json` |

## For AI agents

```text
You are adding components from @flx to a shadcn-compatible project.
1. Read this file (https://sh4dcn.vercel.app/md/flx.md) for the component list.
2. Fetch the machine-readable index: https://ui.flexnative.com/r/registry.json
3. Install a single component with its install command from the table above.
4. Full structured record: https://sh4dcn.vercel.app/json (library slug: flx).
```