# Filterable Collections block

> Curated collection browse page with multi-filter toolbar and pagination

Filterable collection grid with search, category, availability, and fit filters, sort, and pagination. Cards show clipped image with badge, title, tags, and count. ReUI Badge; shadcn Button, Select, Switch, Popover, Breadcrumb, Pagination.

- Type: Pro block
- Category: [Category Card](https://web.dev.reui.io/blocks/ecommerce/category-card.md)
- Page: https://web.dev.reui.io/blocks/ecommerce/category-card/category-card-2
- MCP: `get_block("category-card-2")`
- Built with: Badge, Breadcrumb, Button, Empty, Field, Input Group, Pagination, Popover, Select, Skeleton, Switch
- Installs with a ReUI Pro or Ultimate license; setup: https://web.dev.reui.io/docs/license-setup

## Best for

A searchable collections page with a Filters popover for category, availability and fit, a sort select and 4 per page pagination

## Agent notes

- `CategoryCard` filters, sorts and pages the sample `collections` in memory with `pageSize` 4; move that work to your API for a real catalog
- The Featured only switch sets `featuredOnly`, which keeps only collections that have a `badge`, so there is no separate featured flag
- The fit chip counts in `COLLECTION_FIT_OPTIONS` are fixed numbers, not derived from `collections`, so compute them from your data

## When not to use

- Products with prices, color swatches and a wishlist toggle under filters: use [Colorway Catalog](https://web.dev.reui.io/blocks/ecommerce/product-card/product-card-2.md) (`get_block("product-card-2")`)
- Records that need a multi-field filter builder and bulk actions on selected rows: use the [Filtering blocks](https://web.dev.reui.io/blocks/data-grid/filtering.md)

## Install

```bash
npx shadcn@latest add @reui/category-card-2
```

## About Category Card blocks

### When to use

- A shop by category section that sends shoppers from a photo into a department or collection
- Collection and catalog landing pages: a featured department, curated guides or seasonal edits
- A collections browse page that shoppers search, filter, sort and page through

### When not to use

- Individual items for sale on tiles, each with its own price and buy or wishlist controls: use the [Product Card blocks](https://web.dev.reui.io/blocks/ecommerce/product-card.md)
- Dashboard tiles for KPIs, records or setup guides, away from any storefront: use the [Card blocks](https://web.dev.reui.io/blocks/application/card.md)
- Rows of funds, transactions or integrations, each with a figure or a connect button: use the [List blocks](https://web.dev.reui.io/blocks/application/list.md)

### Agent notes

- `CategoryCard` takes no props and renders the arrays in its data module; add a prop to pass in your own categories
- Every `href` in the data module is a hash placeholder and every `image` points at an Unsplash demo photo; swap in your routes and photos
- Each page.tsx centers `CategoryCard` in a padded `min-h-svh` wrapper; drop it inside your own storefront layout

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.