# Core Facets Filter block

> Faceted ecommerce product filter sidebar with active filter chips

Refine a product catalog by category and brand checkboxes with counts, a price range slider, color swatches, and size buttons, with removable active chips plus apply and reset. shadcn Card, Checkbox, Slider, Button. Shop, faceted search, listing.

- Type: Pro block
- Category: [Filter Sidebar](https://web.dev.reui.io/blocks/ecommerce/filter-sidebar.md)
- Page: https://web.dev.reui.io/blocks/ecommerce/filter-sidebar/filter-sidebar-1
- MCP: `get_block("filter-sidebar-1")`
- Built with: Button, Card, Checkbox, Label, Separator, Slider
- Installs with a ReUI Pro or Ultimate license; setup: https://web.dev.reui.io/docs/license-setup

## Best for

Only the 5 core facets of category, brand, price, color and size, stacked in one plain Card with no department or rating

## Agent notes

- Sample data is `CATEGORIES`, `BRANDS`, `COLORS` and `SIZES`; the Slider spans `PRICE_MIN` to `PRICE_MAX` in steps of 5
- The Apply filters `Button` has no `onClick` and only the chips read `categories`, `brands`, `colors`, `sizes` or `priceRange`; wire them
- Each `COLORS` entry holds an oklch `swatch` that also tints the dot on its removable chip; set real values per color

## When not to use

- A staff table of records narrowed by a column filter bar: use the [Filtering blocks](https://web.dev.reui.io/blocks/data-grid/filtering.md)
- A row of collection tiles that sends shoppers into a curated range: use the [Category Card blocks](https://web.dev.reui.io/blocks/ecommerce/category-card.md)

## Install

```bash
npx shadcn@latest add @reui/filter-sidebar-1
```

## About Filter Sidebar blocks

### 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

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.