Variant Picker
Commerce
Source and install need .
pnpm dlx shadcn@latest add @assembli/product-filtersProduct Filters
Faceted filters for a shop listing. Hand it your products and it counts every facet live: categories with counts, a price range over a histogram with typed min and max, color swatches, a size grid that strikes sizes nothing matches, a rating floor and an in-stock switch. Applied filters gather as chips, and below 1024px it becomes a bottom sheet ending in "Show 12 results". Exports filterProducts.
Props
Other props pass through to the root element.
categories
FacetOption[]
colors
ColorOption[]
sizes
FacetOption[]
ratings
number[] | false
Default
[4, 3, 2]Rating floors to offer.
falsehides the facet.stockFilter
boolean
Default
trueShows the "In stock only" switch.
products*
T[]
value
ProductFilterValue
defaultValue
ProductFilterValue
Default
EMPTY_PRODUCT_FILTERSonValueChange
(value: ProductFilterValue) => void
defaultOpen
FacetKey[]
Facets open at first. Defaults to all.
priceStep
number
Default
5Rounds the price range to this step.
mode
"auto" | "panel" | "sheet"
Default
"auto"autoshows the panel from 1024px and a Filters button that opens a bottom sheet below that.container
HTMLElement | React.RefObject<HTMLElement | null> | null
Mount the sheet inside this element instead of
<body>(a preview frame, a pane).currency
string
Default
"USD"locale
string
Default
"en-US"title
React.ReactNode
Default
"Filters"
| Description | |||
|---|---|---|---|
| categories | FacetOption[] | – | |
| colors | ColorOption[] | – | |
| sizes | FacetOption[] | – | |
| ratings | number[] | false | [4, 3, 2] | Rating floors to offer. |
| stockFilter | boolean | true | Shows the "In stock only" switch. |
| products* | T[] | – | |
| value | ProductFilterValue | – | |
| defaultValue | ProductFilterValue | EMPTY_PRODUCT_FILTERS | |
| onValueChange | (value: ProductFilterValue) => void | – | |
| defaultOpen | FacetKey[] | – | Facets open at first. Defaults to all. |
| priceStep | number | 5 | Rounds the price range to this step. |
| mode | "auto" | "panel" | "sheet" | "auto" |
|
| container | HTMLElement | React.RefObject<HTMLElement | null> | null | – | Mount the sheet inside this element instead of |
| currency | string | "USD" | |
| locale | string | "en-US" | |
| title | React.ReactNode | "Filters" |
