# Shadcn Filter Sidebar blocks

> Filter and facet sidebars for refining product searches by price, size, and attributes.

- Type: Pro blocks (eCommerce)
- Page: https://web.dev.reui.io/blocks/ecommerce/filter-sidebar
- Blocks: 7
- Installs with a ReUI Pro or Ultimate license; setup: https://web.dev.reui.io/docs/license-setup

## When to use

- A shop listing facet panel: category and brand counts, a price range, color swatches and size buttons
- Apparel catalogs narrowed further by department, material, star rating, stock or sale status
- Long facet lists folded into accordion sections, or moved into a side Sheet behind a Filters button

## When not to use

- A navigation sidebar of page links and a user menu around every screen of a product: use the [App Shell blocks](https://web.dev.reui.io/blocks/application/app-shell.md)
- A chip row of field, operator and value rules over results you already render: use [Filters](https://web.dev.reui.io/components/filters.md) (`get_component("filters")`)
- A back office records table that staff narrow by column, status or search: use the [Filtering blocks](https://web.dev.reui.io/blocks/data-grid/filtering.md)

## Agent notes

- Replace `CATEGORIES`, `BRANDS`, `COLORS`, `SIZES` and `PRICE_MAX` with your catalog; each facet `count` is a fixed number that never recounts
- `FilterSidebar` takes no props and the Apply filters `Button` has no `onClick`; lift its `useState` facets out to query your products
- Each block opens with demo picks such as `outerwear`, `northline`, `black` and a 40 to 180 `priceRange` already set; start them empty

## Blocks

- [Core Facets Filter](https://web.dev.reui.io/blocks/ecommerce/filter-sidebar/filter-sidebar-1.md): Faceted ecommerce product filter sidebar with active filter chips. Best for only the 5 core facets of category, brand, price, color and size, stacked in one plain Card with no department or rating.
- [Apply Bar Filters](https://web.dev.reui.io/blocks/ecommerce/filter-sidebar/filter-sidebar-2.md): Product filter sidebar with active chips, price slider, and color swatches. Best for category, brand, price, color and size on a card panel inside a muted Frame tray that holds the title and the Apply bar.
- [Department Facet Filter](https://web.dev.reui.io/blocks/ecommerce/filter-sidebar/filter-sidebar-3.md): Faceted ecommerce filter sidebar with department pills, price slider, and removable filter chips. Best for department pills, material checkboxes, star rating radios and stock and sale switches, all 9 sections open in a plain Card.
- [Full Facet Panel](https://web.dev.reui.io/blocks/ecommerce/filter-sidebar/filter-sidebar-4.md): Ecommerce product filter sidebar with department pills, color swatches, and removable filter chips. Best for all 9 facet groups always visible, from department pills to stock and sale switches, on a card panel in a muted Frame tray.
- [Slide-Out Filters](https://web.dev.reui.io/blocks/ecommerce/filter-sidebar/filter-sidebar-5.md): Slide-Out Ecommerce Product Filter Panel with Active Filter Chips. Best for a right side Sheet behind a Filters button that shows the active count, with a scrolling body between pinned header and footer.
- [Accordion Filters](https://web.dev.reui.io/blocks/ecommerce/filter-sidebar/filter-sidebar-6.md): Collapsible ecommerce filter sidebar with accordion facets and active filter chips. Best for accordion sections with Category and Price open first, a solid count pill on triggers that hold picks, in a narrow Card.
- [Multi-Open Filters](https://web.dev.reui.io/blocks/ecommerce/filter-sidebar/filter-sidebar-7.md): Ecommerce Filter Sidebar with Removable Chips and Accordion Facets. Best for foldable facet groups in a muted Frame tray, Category and Price open first, a secondary Badge counting picks on any group.

Every ReUI item has a twin like this one; the index is https://web.dev.reui.io/llms.txt. Agents with the ReUI MCP (https://web.dev.reui.io/docs/mcp) get the same guidance from the getters named above.