# Apply Bar Filters block

> Product filter sidebar with active chips, price slider, and color swatches

Ecommerce sidebar to refine listings by category, brand, price range, color swatches, and size, with result counts and removable filter chips. ReUI Frame; shadcn Button, Checkbox, Label, Slider, Separator. For product listing, shop, category browse.

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

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

## Agent notes

- Facets come from `CATEGORIES`, `BRANDS`, `COLORS` and `SIZES` with fixed `count` numbers; the Slider tops out at `PRICE_MAX`
- The Apply filters `Button` sits in `FrameFooter` with no `onClick`; only Reset calls `handleClearAll`, so nothing queries products

## When not to use

- A lone price range track with no other facets around it: use [Slider](https://web.dev.reui.io/components/slider.md) (`get_component("slider")`)

## Install

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

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