# Full Facet Panel block

> Ecommerce product filter sidebar with department pills, color swatches, and removable filter chips

Faceted product refinement panel with category, material, brand checkboxes, price slider, color swatches, size buttons, star ratings, quick toggles, removable chips. ReUI Frame, Rating; shadcn Checkbox, Slider, Switch. Faceted search, shop sidebar.

- 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-4
- MCP: `get_block("filter-sidebar-4")`
- Built with: Button, Checkbox, Frame, Label, Radio Group, Rating, Separator, Slider, Switch
- Installs with a ReUI Pro or Ultimate license; setup: https://web.dev.reui.io/docs/license-setup

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

## Agent notes

- Replace `DEPARTMENTS`, `MATERIALS`, `BRANDS` and `RATINGS` along with `CATEGORIES`; every facet `count` stays a fixed number
- `inStockOnly` starts true with no chip to remove it, unlike `onSaleOnly`; only its Switch or `handleClearAll` resets it
- The Apply filters `Button` in `FrameFooter` has no `onClick`, so no product list ever receives the picked facets

## When not to use

- A shop grid whose own toolbar sorts and filters the listings below it: use [Rated Product Grid](https://web.dev.reui.io/blocks/ecommerce/product-card/product-card-8.md) (`get_block("product-card-8")`)

## Install

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

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