# Shadcn Category Card blocks

> Category cards with featured products, banners, and subcategory navigation.

- Type: Pro blocks (eCommerce)
- Page: https://web.dev.reui.io/blocks/ecommerce/category-card
- Blocks: 6
- Installs with a ReUI Pro or Ultimate license; setup: https://web.dev.reui.io/docs/license-setup

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

## 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), used by 1 of 6 blocks

## Blocks

- [Category Browse Grid](https://web.dev.reui.io/blocks/ecommerce/category-card/category-card-1.md): Shop by Category Grid with Hover Browse Buttons and Badges. Best for a centered heading over a 4 column photo grid with item counts and blurbs, where a Browse button slides up over each image on hover.
- [Filterable Collections](https://web.dev.reui.io/blocks/ecommerce/category-card/category-card-2.md): Curated collection browse page with multi-filter toolbar and pagination. Best for a searchable collections page with a Filters popover for category, availability and fit, a sort select and 4 per page pagination.
- [Category Carousel](https://web.dev.reui.io/blocks/ecommerce/category-card/category-card-3.md): Carousel collection filter with color-tinted category cards and hover browse buttons. 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.
- [Featured Department](https://web.dev.reui.io/blocks/ecommerce/category-card/category-card-4.md): Ecommerce catalog page with featured department and scrollable category index. Best for a large featured department beside a scrolling index of the rest, with item counts, starting prices and a catalog total.
- [Collection Guides](https://web.dev.reui.io/blocks/ecommerce/category-card/category-card-5.md): Collection Guides Browser with Image-Led List Rows and Category Links. Best for single column guide rows pairing a photo with a View button, a starting budget and dot separated links to subcategories.
- [Seasonal Categories](https://web.dev.reui.io/blocks/ecommerce/category-card/category-card-6.md): Seasonal Category Grid with Full-Card Hover Reveal and Breadcrumb Header. Best for wide 2 column image tiles whose resting name and badge give way on hover to a dark panel with the blurb and a Shop button.

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.