flx – shadcn/ui Components – Page 6

Add Filters

@flx/tsf-recipes-04

Subscribe with an email and a delivery frequency.

block

@flx/tooltip-09

Hide the pointer arrow for a flatter look.

block

@flx/empty-03

Search empty state with a clear-filters action.

block

@flx/dropdown-16

Bell trigger with an unread badge and an activity list.

block

@flx/item-13

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

block

@flx/spot-02

A fanned stack of notification cards.

block

@flx/card-11

Horizontal field rows each toggled with a switch.

block

@flx/popover-07

Switches with labels and descriptions inside the popover.

block

@flx/popover-10

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

block

@flx/rhf-rules-03

Keep a numeric input within a sensible range.

block

@flx/tsf-rules-03

Keep a numeric input within a sensible range.

block

@flx/table-14

TanStack Table, numbered page buttons with prev / next arrows.

block

@flx/dialog-09

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

block

@flx/tooltip-04

Labels icon-only buttons in a toolbar.

block

@flx/card-07

A footer button launches a modal with subscription detail.

block

@flx/verify-identity-2

OTP Challenge for Verify Identity.

block

@flx/reset-password-2

OTP Code for Reset Password.

block

@flx/button-22

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

block

@flx/table-13

TanStack Table, prev / next controls with a rows-per-page select.

block

@flx/skeleton-04

A heading followed by full-width body lines.

block

@flx/sign-in-4

Passkey for Sign In.

block

@flx/two-factor-setup-3

Passkey for Two-Factor Setup.

block

@flx/rhf-rules-01

Pick a strong password and confirm it matches.

block

@flx/tsf-rules-01

Pick a strong password and confirm it matches.

block

@flx/verify-identity-1

Password Re-auth for Verify Identity.

block

@flx/card-14

Name on card, card number with icon, expiry, CVC, and country select fields with a pay button.

block

@flx/checkbox-09

Selectable saved credit cards with brand and last four.

block

@flx/share-access-2

People Picker for Share Access.

block

@flx/sign-in-5

Phone & OTP for Sign In.

block

@flx/dialog-11

Scrollable avatar rows with selection; Invite footer.

block

@flx/tabs-15

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

block

@flx/table-17

TanStack Table, a column pinned to the right stays visible while scrolling horizontally.

block

@flx/manage-subscription-1

Plan Overview for Manage Subscription.

block

@flx/accordion-06

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

block

@flx/settings-4

Preferences Dialog for Settings.

block

@flx/preset-scope

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

component

@flx/tabs-13

Docs-style switch between live preview and code snippet.

block

@flx/card-09

Highlighted plan with a Popular badge and feature checklist.

block

@flx/skeleton-15

A plan name, price, feature rows, and a CTA button.

block

@flx/item-18

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

block

@flx/tabs-14

Monthly versus yearly billing toggle swaps the price.

block

@flx/card-10

Square image with a sale badge, price, and add-to-cart.

block

@flx/card-08

Centered avatar, stats row, and follow / message actions.

block

@flx/popover-11

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

block

@flx/verify-identity-3

Push Approval for Verify Identity.

block

@flx/dropdown-07

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

block

@flx/dialog-19

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

block

@flx/checkbox-12

Controller binds a checkbox group to React Hook Form; Zod requires at least one selection.

block