# Category Carousel block

> Carousel collection filter with color-tinted category cards and hover browse buttons

Paginated carousel for browsing product collections. Color-tinted cards with image zoom on hover, a reveal browse button, and page-count badge. ReUI Badge; shadcn Card, Button, Carousel. Category filter, shop landing, ecommerce browsing.

- 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-3
- MCP: `get_block("category-card-3")`
- Built with: Badge, Button, Card, Carousel
- Installs with a ReUI Pro or Ultimate license; setup: https://web.dev.reui.io/docs/license-setup

## Best for

Color tinted cards with an icon beside each name, paged 4 at a time in a carousel with a page counter and arrow buttons

## Agent notes

- Each entry in `collections` sets its tint in `cardClassName` and its glyph in `icon`, so a new collection needs both beside `image` and `href`
- `collectionPages` slices `collections` into pages of a literal 4 to fill the 4 column grid, so change both when you change the page size
- The Filter by Collections heading is only a title: no filter state exists and each card just links through `href`

## When not to use

- A faceted panel of checkboxes with active chips narrowing a list of items for sale: use [Core Facets Filter](https://web.dev.reui.io/blocks/ecommerce/filter-sidebar/filter-sidebar-1.md) (`get_block("filter-sidebar-1")`)

## Third-party libraries

- Embla Carousel v8: [API reference](https://www.embla-carousel.com/docs/v8/api), [docs](https://www.embla-carousel.com/docs/v8/get-started/react), through shadcn Carousel

## Install

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

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