Product Filters Sidebar React component
A collection page with a filter sidebar: collapsible groups for category with live counts, a dual-handle price range over a price histogram, color swatches, minimum rating, in-stock and on-sale switches, removable active-filter chips, sorting, a result count and a grid that updates instantly (a toggle panel on phones).
About the Product Filters Sidebar component
Product Filters Sidebar is a complete collection page: filters on the left, results on the right, and everything updates the moment a box is ticked or a handle is dragged. Counts next to each category reflect the other filters, so people never pick an option that leads to nothing.
The price filter shows where products cluster with a small histogram, active filters appear as chips that are easy to remove one by one, and on phones the whole sidebar folds behind a single Filters button.
When to use it
Use it for collection and category pages, search results, or any catalog with more than a dozen products.
For a horizontal bar of filter dropdowns use the Horizontal Filter Bar; for a full-screen phone sheet use the Mobile Filter Modal.
Installation
Add the Product Filters Sidebar component to your project with the shadcn CLI. It lands in components/product-filters-sidebar.tsx as plain React + Tailwind CSS source you own and can edit.
npx shadcn@latest add @reactframe/product-filters-sidebarOr copy the source by hand and install its dependencies:
npm install motion clsx tailwind-mergeProps
<ProductFiltersSidebar /> accepts 4 props, all optional.
| Prop | Type | Default |
|---|---|---|
| products | FilterProduct[] | PRODUCTS |
| currency | string | "$" |
| theme | "dark" | "light" | "dark" |
| className | string | — |
- productsFilterProduct[]Default: PRODUCTS
- currencystringDefault: "$"
- theme"dark" | "light"Default: "dark"
- classNamestring
Collections
Use-case pages that compare Product Filters Sidebar with the other components that do a similar job.
npm dependencies
Installed for you by the shadcn CLI.
Product Filters Sidebar FAQ
- Does it filter on the client?
- Yes, which suits catalogs of a few hundred products. For larger catalogs, send the same filter state to your search API and render the results it returns.
- How do category counts work?
- Each count applies every active filter except category itself, so counts show what you'd get if you added that category.
- How is the dual price slider built?
- Two native range inputs sit on top of each other with transparent tracks; only their thumbs receive the pointer. Handles keep at least 10 apart and both are keyboard accessible.
- Can I add more colors?
- Add the color name to products and its hex to COLOR_HEX. Swatches are built from the colors that actually appear in your products.
- Is it accessible?
- Groups use aria-expanded, checkboxes and radios are native, the price thumbs have labels and value text, swatches and switches are labelled toggles, chips say what they remove and the result count is announced.
