---
title: "Product list with filters"
description: "A filtered product list: category chips and a sort over the grid, with glaze, price and stock filters in a sidebar or a phone sheet."
plan: Pro
docs: https://ui.edbn.me/docs/blocks/product-list-filters
---

# Product list with filters

A filtered product list: category chips and a sort over the grid, with glaze, price and stock filters in a sidebar or a phone sheet.

Built from ToggleGroup, Select, Accordion, Checkbox, Slider, NumberField, Sheet and Empty. Category chips, filters and the sort narrow and order the grid as you change them. Active filters show as chips you can remove one by one or with Clear all, and the count of pieces is announced as it changes. When nothing matches, the grid says so and offers to clear the filters. On phones the filters move into a bottom sheet behind a Filters button that counts them, with a Show button that names how many pieces match.

A Pro block built on Base UI and Tailwind CSS v4.

## Installation

This is a Pro item. Once per project, create a token at https://ui.edbn.me/dashboard/tokens, put it in `.env.local` as `EDBN_TOKEN`, and add the registry to `components.json`:

```json
{
  "registries": {
    "@edbn": {
      "url": "https://ui.edbn.me/r/{name}.json",
      "headers": { "Authorization": "Bearer ${EDBN_TOKEN}" }
    }
  }
}
```

Then install:

```bash
npx shadcn@4.19.0 add @edbn/product-list-filters
```

## Dependencies
- npm: lucide-react@^1.33.0
- edbn: edbn-base, accordion, aspect-ratio, button, checkbox, empty, field, number-field, select, sheet, slider, text-link, toggle-group

## Source

The source is part of Pro (https://ui.edbn.me/pricing). The install above adds it to the project, ready to edit.

## More product lists blocks

All 4, with install commands: https://ui.edbn.me/docs/blocks/product-lists · https://ui.edbn.me/docs/blocks/product-lists.md

## For agents
- Base theme, once per project: npx shadcn@4.19.0 add https://ui.edbn.me/r/edbn-base.json
- MCP server with search, items, examples and source: https://ui.edbn.me/mcp
- Every page and item: https://ui.edbn.me/llms.txt