flx – shadcn/ui Components – Page 8

Add Filters

@flx/tsf-fields-04

Numeric slider wired with form.Field, validated against a Zod range.

block

@flx/two-factor-setup-2

SMS Code for Two-Factor Setup.

block

@flx/sign-in-1

Social First for Sign In.

block

@flx/table-11

TanStack Table, click a column header to sort ascending or descending.

block

@flx/button-21

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

block

@flx/sign-in-6

Split Screen for Sign In.

block

@flx/select-a-plan-5

Spotlight Recommendation for Select a Plan.

block

@flx/banner-12

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

block

@flx/dialog-18

Full-width footer buttons for mobile-friendly CTAs.

block

@flx/card-05

KPI value with an icon and a tinted trend badge.

block

@flx/skeleton-10

A grid of KPI cards with label, value, and trend lines.

block

@flx/item-17

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

block

@flx/avatar-06

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

block

@flx/badge-05

Tinted success, warning, error, and info states.

block

@flx/command-10

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

block

@flx/dialog-06

Header fixed; scrollable changelog-style body.

block

@flx/table-10

Header pinned while the capped body scrolls.

block

@flx/table-04

Zebra striping tints every other row.

block

@flx/dropdown-08

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

block

@flx/dialog-12

Completion check icon and Continue action.

block

@flx/settings-1

Tabbed Sections for Settings.

block

@flx/skeleton-06

A header row above several placeholder data rows.

block

@flx/dropdown-11

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

block

@flx/checkbox-10

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

block

@flx/badge-13

A wrapping group of outline badges as tags.

block

@flx/dialog-20

Dialog form with TanStack Form and Zod onSubmit validation.

block

@flx/checkbox-13

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

block

@flx/command-13

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

block

@flx/dropdown-19

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

block

@flx/input-13

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

block

@flx/select-13

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

block

@flx/switch-13

form.Field wires the switch; Zod onSubmit validator surfaces FieldError.

block

@flx/dialog-04

Long scroll body; Accept and Decline pinned footer.

block

@flx/testimonials-01

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

block

@flx/rhf-fields-03

Multi-line textarea with a description and length-constrained Zod rule.

block

@flx/tsf-fields-03

Multi-line textarea with a description and length-constrained Zod rule.

block

@flx/rhf-fields-02

Native text and email inputs bound with register and Zod validation.

block

@flx/tsf-fields-02

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

block

@flx/dropdown-14

Radio group toggling light, dark, and system themes.

block

@flx/switch-06

Sun and moon icons flank a light / dark toggle.

block

@flx/select-a-plan-1

Tiered Cards for Select a Plan.

block

@flx/rhf-fields-06

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

block

@flx/tsf-fields-06

Single-select toggle group wired with form.Field and Zod validation.

block

@flx/badge-11

Up and down arrows with tinted gain / loss percentages.

block

@flx/dialog-13

Type delete to enable destructive button.

block

@flx/select-a-plan-4

Usage Slider for Select a Plan.

block

@flx/item-12

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

block

@flx/badge-02

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

block