Registry

Complete filter UI kits built on use-filters, installable with the shadcn CLI. Each kit is a different approach to the same job — loop-driven bars that render from your config, or standalone controls you compose by hand — and each covers the full set of filter types, ready for a real project.

Every kit installs its files into components/filters/…, adds @mbsatimov/use-filters and any missing shadcn/ui primitives, and is yours to edit from there.

Loop-driven: pass the `filters` array and the whole toolbar renders itself.

The production filter bar: inline search inputs, one dashed "Filters" button with a searchable two-level index, and every active filter as its own editable chip. Covers every filter type.

npx shadcn@latest add https://use-filters.vercel.app/r/filter-bar.json
8 filescomponents/filters/filter-bar/

Loop-driven: a facet sidebar on desktop, a chip row with per-facet bottom drawers on mobile.

E-commerce style faceted filtering. Sections render per filter with flat sidebar editors; manual-commit facets stage edits behind an Apply bar (desktop) or a "Show results" drawer (mobile). One `renderEditor` override swaps any editor, e.g. for a price slider.

npx shadcn@latest add https://use-filters.vercel.app/r/facet-panel.json
6 filescomponents/filters/facet-panel/
Used in:Marketplace
Filter Controlsfilter-controls Source

Composed by hand: one standalone component per filter type, placed wherever you want.

SelectFilter, MultiSelectFilter, DateFilter, DateRangeFilter, TextFilter, NumberFilter, NumberRangeFilter, BooleanFilter, AsyncSelectFilter, AsyncMultiSelectFilter. No orchestration, no auto-appearing reset — drop two controls at the top of a page and you are done.

npx shadcn@latest add https://use-filters.vercel.app/r/filter-controls.json
14 filescomponents/filters/filter-controls/