FLX UI components

Scale taste across projects. Blocks, patterns, intents, and prompts for builders and AI agents. Built on shadcn/ui.

Components: 468
Framework: React
Stack: React, TypeScript, Tailwind
License: AGPL-3.0
GitHub stars: 43
Source: https://github.com/felipemenezes098/ui-flx
Website: https://ui.flexnative.com
Install: pnpm dlx shadcn@latest add @flx/{name}

All FLX UI components

Basic: Only one section open at a time, type="single" collapsible. The default behavior.
Multiple: type="multiple" keeps several sections open at once.
With icons: Leading icon beside each trigger label.
FAQ: A titled question-and-answer list.
Separated cards: Each item is a bordered card with spacing between them.
Plus / minus icon: Plus icon on each trigger that turns into a minus when open, instead of a chevron.
Left chevron: Rotating chevron placed before the label instead of after it.
Rich content: Lists, links, and a button inside the panel body.
Disabled item: One trigger disabled while the others stay interactive.
Nested: An accordion rendered inside another panel body.
Ghost: Borderless minimal rows with an active color on open.
Filled trigger: Each trigger sits on a muted, rounded background.
Expand all: Controlled value with expand-all / collapse-all buttons.
Settings sections: Grouped switch rows revealed inside each panel.
With subtitle: Two-line trigger pairing a title with helper text.
Basic: Image avatar with an initials fallback.
Fallback initials: Missing image falls back to initials.
Icon fallback: Generic user icon when there is no image or name.
Sizes: Small, default, and large sizes side-by-side.
Colored fallback: Tinted initials fallbacks using semantic tokens.
Status badge: Presence dot in the corner showing online, away, or offline.
Badge with icon: Verified check icon inside the AvatarBadge.
With name: Avatar beside a name and email, forming a user row.
Group: Overlapping AvatarGroup stack of members.
Group with count: Overlapping group with a +N count for the remaining members.
Group with tooltip: Hover each avatar in the group to reveal its name.
Loading skeleton: Skeleton placeholder while the avatar loads.
Icon on top: Icon badge pinned to the top-right corner.
Basic: A single default badge.
Variants: All six variants side-by-side: default, secondary, destructive, outline, ghost, link.
With icon: Leading verified icon before the label.
With status dot: A colored presence dot beside an outline label.
Status colors: Tinted success, warning, error, and info states.
Count: Pill-shaped numeric counts with tabular figures.
As link: render prop renders the badge as an anchor with a trailing icon.
Removable: Dismissible tag chips with a trailing remove button.
With avatar: Assignee chip with a leading avatar inside the badge.
Sizes: Small, default, and large sizes via className.
Trend delta: Up and down arrows with tinted gain / loss percentages.
Icon only: Round icon-only badges across variants.
Tag list: A wrapping group of outline badges as tags.
Basic: Icon, message, and a subtle bordered surface.
Variants: Info, success, warning, and error tones stacked.
Dismissible: A close button hides the banner with a restore link.
With actions: Message paired with Later and Update now buttons.
Announcement bar: Full-width gradient promo with a New tag and arrow.
Expandable: Collapsible release notes that reveal highlights.
Maintenance: Amber system notice with a pulsing status dot.
Email verification: Blue prompt with a Resend email button that switches to a sent confirmation.
Stacked: A list of dismissible notices, each removed on its own.
With progress: Live import banner with a spinner and a progress bar.
Bento grids 01: Three-column bento: primary tile (two-thirds) with title, description, CTA and media, plus supporting image cards.
Bento grids 02: A row of collection cards, one twice as wide, each with a product photo bleeding off the top, a title, a short description and a link.
Bento grids 03: A product grid with a tall featured item in the center, four smaller items around it, category badges, prices and names.
Bento grids 04: Two stacked cards with a two-tone title, a paragraph and a pill button beside a product photo surrounded by short feature callouts on a…
Bento grids 05: A mosaic of rounded tiles that mixes photos with two short text tiles, one with a detail photo at its base and one wide photo as the…
Bento grids 06: A brand mosaic of square tiles around one large central photo, mixing photographs with spaced-out taglines and a small mark.
Basic: Links with a current page and chevron separators.
With icons: Each crumb prefixed with a small icon, such as a house, folder, or file.
Custom separator: Swap the chevron for a slash via separator children.
Dot separator: Lighter middle dot divider between crumbs.
With ellipsis: Middle levels replaced by a static ellipsis icon, showing only the first and last crumbs.
With dropdown: Ghost icon Button opens a menu of the hidden levels.
Responsive collapse: Dropdown on small screens, full inline path from sm up.
As link: Breadcrumb links that open in a new tab, with an external-link icon on the outbound crumb.
Dropdown at end: Last crumb is a Button switcher for sibling pages.
Basic: Default button with text label.
Variants: All six variants side-by-side: default, secondary, outline, ghost, destructive, link.
Sizes: Extra small, small, default, and large sizes.
With leading icon: Button with an icon placed before the text label.
With trailing icon: Button with an icon placed after the text label.
Icon only: Square icon-only buttons in every icon size.
Disabled: Button in the disabled state, visually dimmed and non-interactive.
Loading: Button with a spinning loader icon and label, indicating an in-progress async action.
As link: Link-styled button that navigates to an external URL, rendered as an anchor with a trailing external-link icon.
With avatar: User picker style button with a small avatar image leading the text label.
Hover slide arrow: CTA arrow nudges right on hover.
With badge: Notification count badge overlapping an icon button.
Copy to clipboard: Icon and label swap to a check on copy.
Hover rotate refresh: Refresh button whose icon rotates a full 360° on each click.
Hamburger toggle: Three bars morph into an X on press.
Basic group: Horizontal row of buttons with merged borders, used for segmented controls like date range pickers.
Vertical group: Stacked column of buttons with merged borders, used for vertical navigation menus.
Icon toolbar: Compact toolbar of icon-only buttons with merged borders, used for text formatting actions.
With label prefix: Static text label leading a group of action buttons, useful for labelled sort or filter controls.
Split button: Primary action button paired with a chevron that opens a dropdown of secondary actions.
Pagination: Prev arrow, numbered page buttons, and Next arrow in a merged-border row.
Copy field: Read-only text value paired with a trailing icon button that copies it to the clipboard, with an animated check on success.
Group with disabled: Merged-border button row where one step is visually disabled and non-interactive.
Destructive pair: Cancel + Delete spaced action pair.
With select: Sort dropdown paired with a direction-toggle icon button in a merged-border row.
With popover swatch: Color swatch button that opens a grid of color swatches, paired with a hex value label in a merged-border row.
Basic: Header, action, content, and a bordered footer.
With image: Top media banner above title, body, and a CTA footer.
Horizontal: Image on the left beside a category, title, and link.
With action menu: Three-dot icon button in the header corner opens a dropdown with rename, share, and delete options.
Stat: KPI value with an icon and a tinted trend badge.
Login form: Email and password fields with sign-in and OAuth buttons.
Opens in dialog: A footer button launches a modal with subscription detail.
Profile: Centered avatar, stats row, and follow / message actions.
Pricing: Highlighted plan with a Popular badge and feature checklist.
Product: Square image with a sale badge, price, and add-to-cart.
Notification settings: Horizontal field rows each toggled with a switch.
Selectable: Clickable plan cards with a ring and check on the active one.
Image overlay: Text and a CTA over a gradient-darkened cover image.
Payment form: Name on card, card number with icon, expiry, CVC, and country select fields with a pay button.
Carousel 01: Auto-scroll carousel that pauses on item hover and reveals title.
Carousel 02: A carousel of media with a title and description.
Carousel 03: A carousel of cards with a title and description.
Basic: Single checkbox with a label.
With description: Checkbox with a label and helper description.
Disabled: Disabled unchecked and disabled checked states.
Group: Grouped list of notification checkboxes, each with a label and helper description, inside a labelled fieldset.
Select all: Parent checkbox with an indeterminate mixed state.
Nested tree: Multi-level file tree; parents derive checked / indeterminate from children.
Choice cards: Bordered add-on cards that highlight when checked.
Payment methods: Selectable saved credit cards with brand and last four.
Table row selection: Data table with a select-all header, per-row checkboxes, and a count.
Invalid / required: Checkbox with an inline error message that appears when the form is submitted without checking it.
React Hook Form + Zod: Controller binds a checkbox group to React Hook Form; Zod requires at least one selection.
TanStack Form + Zod: form.Field wires a checkbox group to TanStack Form; Zod validates on submit and shows an error when none are selected.
Basic: Canonical starred-repos toggle with a chevron trigger.
FAQ list: Stacked question rows; each answer expands with an animated chevron.
File tree: Nested folders built from collapsible rows, with folder icons that swap on open.
Read more: Truncated paragraph reveals the rest; trigger label swaps to Show less.
Sidebar nav group: Collapsible navigation sections with sub-items and a rotating chevron.
Advanced options: Form reveals extra fields behind an Advanced options toggle.
Basic: Canonical command menu with grouped items, icons, and shortcuts.
Command dialog: Spotlight-style ⌘K palette toggled by a button or keyboard shortcut.
Global search: Rich search dialog with recent, pages, and people plus a hint footer.
Async loading: Debounced search with skeleton rows while loading, an empty state, and shouldFilter disabled for server-driven results.
Combobox: Popover + Command framework picker with a check mark.
Combobox with clear: Selected value shows an inline X that clears without reopening.
Multiple — chips: Multi-select showing every choice as a removable badge chip in the trigger.
Grouped picker: Options split into labeled groups with separators, demonstrated with timezones organized by region.
Assignee picker: Avatars with name and email subtext in the trigger and options.
Status picker: Ghost trigger with a colored status dot, issue-tracker style.
With label: Combobox composed with an accessible field Label.
React Hook Form + Zod: Controller binds the combobox to RHF; Zod resolver drives FieldError on submit.
TanStack Form + Zod: form.Field wires the combobox; Zod onSubmit validator surfaces FieldError when touched.
Multiple — count summary: Trigger shows "first, +N" with a separate button to clear all.
Multiple — faceted filter: Dashed trigger with count badges, checkbox rows, facet counts, and a clear footer.
Inline Anchored: Inline Anchored for Comment Thread.
Side Panel: Side Panel for Comment Thread.
Activity Feed: Activity Feed for Comment Thread.
Content 02: A grid of media cards with a section header and item details below each image.
Content 04: Two-column card grid with a serif section header and copy above each image.
Content 05: A focus grid with items that can be focused and dimmed.
Content 06: Two-column split with serif headline, supporting copy, optional CTA, and a media panel.
Content 07: Two-column grid with serif header, media on top, copy, and optional CTA per column.
Content 09: Two-column icon card grid with serif section header and subtle entrance motion.
Content 11: A billing overview split with a dashboard preview card and two feature highlights, built for the app-shell preset.
Content 12: A centered section header with supporting copy and a CTA, followed by two large side-by-side photos.
Content 13: An editorial layout with a large photo, a short title and paragraph beside it, and two smaller photos offset below.
Content 14: A two-weight studio title with a short intro and link beside a square photo, followed by a bordered row of client marks.
Content 15: A labeled collection intro with a short headline, a row of three product photos with names, and a CTA, framed by thin rules.
Content 16: A large square photo with a thin circular guide and crosshair, a smaller photo beside it and a short title with a paragraph on the side.
Content 17: A short headline above two photos staggered on a diagonal, one landscape on the left and one portrait lower on the right.
Content 18: A centered headline over a wide photo with a text and link card in its corner, beside a short paragraph and a tall photo.
Content 19: A journal index with a small label and title, a large photo, three short articles with thumbnails and a tall photo in an offset grid.
CTA (Call to Action): Shared CTA component with link and button variant
Call to Action 01: A centered text block with a title, description, and CTA.
Call to Action 02: An oversized two-word headline split around a full-bleed photo, with a bracketed call to action at its center.
Analytics overview: Sidebar, KPI cards, a bar chart, and a recent activity list.
Confirm Dialog: Confirm Dialog for Delete Account.
Multi-Step: Multi-Step for Delete Account.
Grace Period: Grace Period for Delete Account.
Confirm action: Polished yes/no with icon and clear hierarchy.
Edit profile: FieldGroup form with Save and Cancel footer.
Delete account: Destructive warning with icon and emphasized copy.
Terms, sticky footer: Long scroll body; Accept and Decline pinned footer.
Share link: Readonly URL with copy control; minimal footer.
Sticky header: Header fixed; scrollable changelog-style body.
Verify code (OTP): 6-digit InputOTP with separator; Verify footer.
Onboarding welcome: Compact hero image, title, and description; dual CTAs.
Footer-only dismiss: No corner close button; dismiss only through the footer.
Pick teammates: Scrollable avatar rows with selection; Invite footer.
Success: Completion check icon and Continue action.
Type to confirm: Type delete to enable destructive button.
Settings sections: Notifications and Security blocks via Separator.
Choose image: Thumbnail grid with selection ring.
Invite team: Icon header plus email field.
Long form, sticky footer: Many fields in scroll; footer-only sticky.
Stacked actions: Full-width footer buttons for mobile-friendly CTAs.
React Hook Form: Dialog form with RHF, Zod resolver, and FieldError on invalid fields.
TanStack Form: Dialog form with TanStack Form and Zod onSubmit validation.
Nested dialog: Dialog stacked inside another dialog, e.g. avatar picker from profile.
From dropdown: Dialog triggered by a DropdownMenuItem with onSelect preventDefault.
Basic: Label, separator, and a list of action items.
With icons and shortcuts: Leading icons paired with trailing keyboard shortcuts.
Grouped: Multiple labeled groups divided by separators.
Destructive item: A red destructive Delete action separated from the regular items.
Disabled items: Non-interactive items dimmed with the disabled prop.
Checkbox items: Toggle multiple view options with checkbox items.
Radio group: Radio items that keep exactly one option selected at a time.
Submenu: A menu item that reveals a nested flyout panel with more options.
Account menu: Avatar trigger with a name and email header block.
Icon button actions: Ghost ellipsis trigger opens a compact actions menu.
Table row actions: Per-row ellipsis menu with edit, copy, and remove.
Sides and alignment: Align start or end and open the menu to the side.
Controlled open: Menu whose open/closed state is managed externally and reflected in the trigger label.
Theme switcher: Radio group toggling light, dark, and system themes.
Multi-select filter: Checkbox items with a count badge and a clear action.
Notifications: Bell trigger with an unread badge and an activity list.
With dialog: A menu item opens a controlled confirmation dialog.
React Hook Form + Zod: Controller binds a radio group to RHF; Zod requires a selection.
TanStack Form + Zod: form.Field wires the radio group; Zod onSubmit surfaces FieldError.
Dynamic Icon: A dynamic icon component with a name and size.
Basic: Icon, title, and description for an empty list.
With actions: First-run state with primary and secondary CTAs.
No results: Search empty state with a clear-filters action.
Avatar group: Bordered empty team card with an avatar stack and invite.
In dialog: Empty inbox state composed inside a Dialog.
Feature 01: List of items: select one to reveal its description and media.
Feature 02: A process section with a split title/description header and a portrait image flanked by two columns of numbered step cards.
Feature 03: A sticky title/description column paired with a scrolling list of features, each with its own title, description, and media.
Feature 04: A title with a two-column list of ruled milestones below it, beside a tall photo.
Feature 05: A centered product title over three icon features, a large product photo and a product card with finish swatches and a CTA.
Feature 06: A short title and a numbered list of four features beside a large photo overlapped by a smaller one.
Hero 01: A centered serif hero with a soft gradient wash, pill CTA, and a floating integration cloud.
Hero 02: A left-aligned serif hero with a media panel: an image backdrop with a floating dashboard mockup on top.
Hero 03: A centered hero with dual CTAs and an image that fades into the page below the copy.
Hero 04: A two-column editorial hero with a soft background wash and a layered collage of two overlapping images.
Hero 05: An editorial hero with a left tagline, right-aligned headline and copy, and a full-width image below.
Hero 06: A split product hero with dual CTA, a compact logo row, and the Spot 01 illustration.
Hero 07: An editorial hero with a full-width image above, a top-aligned tagline, and right-aligned headline and copy below.
Hero 08: A split hero with a bold headline, avatar social proof, and two image cards with invertible overlay text and CTAs.
Hero 09: A centered real-estate hero with a search bar, a masked architecture image that fades into the page, and a split closing statement.
Hero 10: A centered hero with a highlighted headline, dual CTAs, social proof, and a fanned collage of three overlapping images.
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.
Hero 12: A full-bleed image hero with an oversized name, an established label, and a floating pill CTA anchored to the corner.
Hero 13: Asymmetric editorial hero with serif brand title, supporting copy, and two overlapping media frames.
Hero 14: A centered product hero with dual CTAs, a full-width photo with a floating block-builder demo panel, and a logo strip.
Hero 15: A directory-style hero with an oversized title, split intro with dual CTAs, and a row of wordmark cards with minimal imagery.
Basic: Plain text input with a placeholder, no addons.
With Addon: Input with trailing search icon addon.
Disabled: Text input rendered in a disabled, non-interactive state.
With Addon in the end: Password input with a trailing eye-off icon to indicate visibility toggle.
With prefix and suffix: URL input with a fixed "https://" prefix and ".com" suffix text addons.
With loading spinner: Spinning loader in the trailing addon while searching.
With clear button: Clear button appears in the trailing addon when the field has text.
With tooltip: Help icon in the trailing addon opens a tooltip on hover.
With popover: Info button in the trailing addon opens a popover with helper content.
With dropdown menu: Trailing addon button opens a menu to choose search scope.
In Form: Labeled text input with a supporting description line below the field.
React Hook Form + Zod: Controller binds Input to RHF; Zod resolver drives FieldError on submit.
TanStack Form + Zod: form.Field wires Input; Zod onSubmit validator surfaces FieldError when touched.
With search button: ButtonGroup pairs a text input with a trailing search action button.
With currency select: Nested ButtonGroup: currency Select, amount input, and submit icon button.
With email domain: Username field with a fixed @company.com suffix addon, locking the email domain.
With nested input group: Attach button plus InputGroup message field and send action in a ButtonGroup.
Basic: Title plus supporting description.
Variants: Default, outline, and muted variants side-by-side.
Sizes: Default, sm, and xs sizes side-by-side.
With icon: Leading icon placed before the title and description.
With avatar: User avatar photo placed before the name and subtitle.
With thumbnail: Small image thumbnail placed before the title and subtitle.
With actions: Avatar, name, role, and a trailing action button.
Header and footer: Status badge above the title and a metadata row below the description.
As link: The entire row is clickable, navigating to a URL with a trailing arrow icon.
Group: Multiple rows grouped together with thin dividers between each row.
User list: Avatars with name, role, and Follow action per row.
Notifications: Leading icon, title with an unread dot indicator, and a trailing timestamp.
File list: File icon, name, size metadata, and a trailing overflow menu with actions per row.
Settings row: Title and description with a trailing Switch.
Integrations: Brand icon, status badge in title, connect Switch.
Stat rows: Stacked KPI rows with label, value, and trend delta.
Pricing tiers: Stacked tier rows with Popular badge, price, and CTA button.
Activity feed: Icon timeline rows with relative time footer.
In dropdown menu: Compact user avatar and email placed at the top of a dropdown menu.
In popover: File rows with image thumbnails displayed inside a floating popover panel.
Empty team: Overlapping avatar stack above an empty-state message with an invite button.
Lists 01: A filterable list of projects with a row of line tabs, then ruled rows pairing a title and meta, a short description with a pill button…
Lists 02: A centered title with a year, a column of boxed tags beside a large paragraph, and a ruled description list of labelled details.
Avatar Stack: Avatar Stack for Live Presence.
Activity Status: Activity Status for Live Presence.
Logos 01: Logo carousel with auto-scroll, edge gradient and minimalist style.
Plan Overview: Plan Overview for Manage Subscription.
Change Plan: Change Plan for Manage Subscription.
Cancel Flow: Cancel Flow for Manage Subscription.
Channel Matrix: Channel Matrix for Notifications.
Grouped Toggles: Grouped Toggles for Notifications.
Digest Frequency: Digest Frequency for Notifications.
Basic: Numbers with ellipsis, previous, and next links.
Compact: Inline numbers from sm up, "Page X of Y" on mobile.
Interactive window: Stateful current page with a sliding ellipsis range.
Rows per page: Page-size select with first, prev, next, and last.
Results summary: Showing 1–10 of 97 alongside the page controls.
Article prev / next: Two linked cards with titles for adjacent articles.
Dots: Carousel-style dots; the active page expands to a pill.
Jump to page: Numeric input to jump directly to any page.
Card Form: Card Form for Payment.
Saved Methods: Saved Methods for Payment.
Express Wallets: Express Wallets for Payment.
Basic: Default popover with a button trigger and simple text.
With header: Popover with a bold title and a short description below it.
Sides: Place the popover on top, right, bottom, or left of the trigger.
Alignment: Align the content to the start, center, or end of the trigger.
Custom width: Override the default width via className on PopoverContent.
Dimensions form: Form with inline labeled inputs for width, max-width, height, and max-height.
Notification settings: Switches with labels and descriptions inside the popover.
Color picker: Swatch grid with a check icon on the active color.
Share link: Readonly URL input with a trailing copy button.
Notifications list: Notification rows with an icon, message text, timestamp, and unread indicator dot.
Profile card: Banner image, avatar, bio, and follow / message actions.
Cover picker: Thumbnail grid with a selection ring for choosing a cover image.
Filters: Grouped toggle button filters for status and priority, with reset and apply actions.
Scrollable list: Scrollable list of team members with avatars and roles inside a fixed-height popover.
Preset Scope: Activates a preset for a subtree by writing the data-preset attribute. Required by every preset.
Email Link: Email Link for Reset Password.
OTP Code: OTP Code for Reset Password.
Security Questions: Security Questions for Reset Password.
Dynamic Field Array: Start from an empty state, then add and remove teammate rows with per-item validation.
Form in a Dialog: Build an invoice while a dialog validates each line item against its own schema.
Text Input: Native text and email inputs bound with register and Zod validation.
Textarea: Multi-line textarea with a description and length-constrained Zod rule.
Slider: Numeric slider bound via Controller, validated against a Zod range.
Checkbox Group: Multiple checkboxes collected into a string array with a min-selection rule.
Toggle Group: Single-select toggle group bound via Controller with Zod validation.
Select: Grouped select with labelled option groups bound via Controller.
Command: Searchable combobox using Command inside a Popover, bound via Controller.
Dropdown: Single choice via a dropdown menu radio group bound through Controller.
Contact Form: Name, email, topic and message validated on submit.
Create Account: Sign up with name, email, a strong password and terms.
Sign In: Email and password validated on submit.
Newsletter: Subscribe with an email and a delivery frequency.
Password Confirmation: Pick a strong password and confirm it matches.
Email Address: Validate an email address with instant feedback.
Number Range: Keep a numeric input within a sensible range.
Character Limit: Cap text length with a live character counter.
Dashboard preview: A layered app dashboard with a floating notification.
Scroll 01: Sticky media that changes as you scroll through text content.
Basic: Minimal single-value dropdown with a placeholder and a flat list of options.
Grouped: Options organized into labeled groups.
Disabled: Non-interactive select state.
With Icons: Options with leading icons.
With Object: Each option shows a bold label and a muted description sub-line; the trigger displays the full two-line item when selected.
With description only items: Options show a bold label and a muted description sub-line; the trigger shows only the label after selection.
Disabled Items: Select with individual disabled options.
With Avatar: User picker with avatars in trigger and options.
Custom Border & Background: Muted background and custom border on the trigger.
With Label: Accessible field label linked to the select trigger.
In Form: Select composed with Field, FieldLabel, and description.
React Hook Form + Zod: Controller binds Select to RHF; Zod resolver drives FieldError on submit.
TanStack Form + Zod: form.Field wires Select; Zod onSubmit validator surfaces FieldError when touched.
With inline label: Muted prefix label inside the trigger, left of the selected value.
Animated content: Dropdown opens in popper position anchored below the trigger with a small offset, giving a tooltip-style layout.
Icon in the trigger: Fixed leading icon in the trigger alongside the selected value; dropdown options are text only.
Tiered Cards: Tiered Cards for Select a Plan.
Comparison Table: Comparison Table for Select a Plan.
Audience Segments: Audience Segments for Select a Plan.
Usage Slider: Usage Slider for Select a Plan.
Spotlight Recommendation: Spotlight Recommendation for Select a Plan.
Tabbed Sections: Tabbed Sections for Settings.
Sidebar Layout: Sidebar Layout for Settings.
Inline Edit: Inline Edit for Settings.
Preferences Dialog: Preferences Dialog for Settings.
Link with Scope: Link with Scope for Share Access.
People Picker: People Picker for Share Access.
Request Access: Request Access for Share Access.
Social First: Social First for Sign In.
Email & Password: Email & Password for Sign In.
Magic Link: Magic Link for Sign In.
Passkey: Passkey for Sign In.
Phone & OTP: Phone & OTP for Sign In.
Split Screen: Split Screen for Sign In.
Basic: A stack of placeholder lines for a text block.
Avatar with text: A circle beside two lines, mimicking a loading user row.
Card: Media banner above a title, body lines, and a footer.
Paragraph: A heading followed by full-width body lines.
List: Repeated rows, each with a circular avatar and two text lines.
Table: A header row above several placeholder data rows.
Form: Labelled fields above a submit button placeholder.
Select: A field label above a trigger with a chevron block.
Stat cards: A grid of KPI cards with label, value, and trend lines.
Chat thread: Alternating inbound and outbound message bubbles.
Gallery grid: A grid of square image tiles for a loading gallery.
Article: A hero image, title, byline, and stacked body lines.
Pricing card: A plan name, price, feature rows, and a CTA button.
Sidebar nav: A logo header above a list of icon-and-label nav rows, with a user profile row at the bottom.
Analytics overview: Wireframe: sidebar, stat cards, chart, and a list.
Metrics: A stat card with trend and sparkline, layered over a second.
Notifications: A fanned stack of notification cards.
Media card: An image card with a soft gradient fade and caption.
Analytics: A card with a gradient area chart.
Basic: A single standalone switch.
With label: Switch paired with an accessible field label.
With description: Label and helper description beside the switch.
Sizes: The sm and default sizes side-by-side.
Disabled: Disabled off and disabled on states.
Theme toggle: Sun and moon icons flank a light / dark toggle.
Icon in thumb: Custom larger toggle with sun / moon icons that swap inside the thumb.
Settings group: A grouped list of notification settings, each row with a label, helper text, and a switch.
Credit card auto-pay: A visual credit card mockup above a labeled switch for enabling automatic monthly payments.
Choice cards: Clickable add-on rows showing a title, description, price, and a switch, each fully tappable via a wrapping label.
Invalid / required: A required switch in a form that shows an inline error message when submitted while off.
React Hook Form + Zod: Controller binds the switch to RHF; Zod requires opt-in on submit.
TanStack Form + Zod: form.Field wires the switch; Zod onSubmit validator surfaces FieldError.
Basic: Caption, header, and a footer total row.
With images: Avatar thumbnails beside name and email in each row.
Without dividers: Borderless rows for a clean, list-like layout.
Striped rows: Zebra striping tints every other row.
With vertical lines: Column grid lines via per-cell right borders.
Dense: Compact padding and type for high-density data.
With checkbox: Select-all header, per-row checkboxes, and a selection count.
Card table: Table inside a Card with title and status badges.
Vertical: Key-value details with row headers down the left.
Sticky header: Header pinned while the capped body scrolls.
Sortable: TanStack Table, click a column header to sort ascending or descending.
With filters: TanStack Table, global search input plus a status column filter dropdown.
Pagination: TanStack Table, prev / next controls with a rows-per-page select.
Numeric pagination: TanStack Table, numbered page buttons with prev / next arrows.
Column visibility: TanStack Table, toggle individual columns on or off from a dropdown menu.
Resizable columns: TanStack Table, drag the header edge to resize column widths.
Pinnable columns: TanStack Table, a column pinned to the right stays visible while scrolling horizontally.
Row selection: TanStack Table, row checkboxes with a bulk actions toolbar showing count, clear, and delete.
Expanding sub-rows: TanStack Table, expandable parent rows reveal nested child rows for tree-shaped data.
Complex data table: TanStack Table, combines sorting, column filter, pagination, row selection, column visibility toggle, and per-row action menus.
Basic: Three tabs with the default filled variant.
Line variant: Underline indicator instead of filled background.
Vertical line: Vertical orientation with underline indicators, suited for sidebar navigation.
Disabled tab: One trigger disabled while others stay interactive.
With icons: Tabs with a small icon placed before each label in the trigger.
With count badges: Trigger labels paired with secondary count badges.
Icon only: Compact icon-only triggers for view switching.
Icon with title: Icon stacked above the title in each trigger, with a visual panel below.
Account and password: Two-tab card with a profile edit form on one tab and a password change form on the other.
In card: Tabs inside a card with stats, member list, and billing summary panels.
Preview and code: Docs-style switch between live preview and code snippet.
Pricing toggle: Monthly versus yearly billing toggle swaps the price.
Pill track: Rounded pill triggers in a bordered track with cross-fading mood boards.
Testimonials 01: A single testimonial with quote, avatar, author name and role.
Basic: Default dark tooltip on a button.
Sides: Place the tooltip on top, right, bottom, or left.
With shortcut: Label paired with a keyboard shortcut badge inside the tooltip.
On icon button: Labels icon-only buttons in a toolbar.
Custom delay: Tooltips that open instantly, after 500ms, or after 1.2s, showing different hover delay behaviors.
Rich content: Title plus supporting description in the content.
Light via dark class: A light-colored tooltip that appears in light mode, inverted from the default dark style.
Colored: Primary, secondary, and destructive tooltips with arrow color matching the content.
No arrow: Hide the pointer arrow for a flatter look.
Side offset: Adjust the gap between trigger and content.
Dynamic Field Array: Start from an empty state, then add and remove teammate rows with per-item validation.
Form in a Dialog: Build an invoice while a dialog validates each line item against its own schema.
Text Input: Native text and email inputs wired with form.Field and Zod validation.
Textarea: Multi-line textarea with a description and length-constrained Zod rule.
Slider: Numeric slider wired with form.Field, validated against a Zod range.
Checkbox Group: Multiple checkboxes collected into a string array with a min-selection rule.
Toggle Group: Single-select toggle group wired with form.Field and Zod validation.
Select: Grouped select with labelled option groups wired with form.Field.
Command: Searchable combobox using Command inside a Popover, wired with form.Field.
Dropdown: Single choice via a dropdown menu radio group wired with form.Field.
Contact Form: Name, email, topic and message validated on submit.
Create Account: Sign up with name, email, a strong password and terms.
Sign In: Email and password validated on submit.
Newsletter: Subscribe with an email and a delivery frequency.
Password Confirmation: Pick a strong password and confirm it matches.
Email Address: Validate an email address with instant feedback.
Number Range: Keep a numeric input within a sensible range.
Character Limit: Cap text length with a live character counter.
Authenticator App: Authenticator App for Two-Factor Setup.
SMS Code: SMS Code for Two-Factor Setup.
Passkey: Passkey for Two-Factor Setup.
Backup Codes: Backup Codes for Two-Factor Setup.
Password Re-auth: Password Re-auth for Verify Identity.
OTP Challenge: OTP Challenge for Verify Identity.
Push Approval: Push Approval for Verify Identity.
Biometric: Biometric for Verify Identity.

FLX UI components

All FLX UI components

Browse by category