For AI Agents
Hand your agent this brief or the ReUI MCP, not a screenshot. Installs with a ReUI Pro or Ultimate license.
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
- Dashboard tiles for KPIs, records or setup guides, away from any storefront: use the Card blocks
- Rows of funds, transactions or integrations, each with a figure or a connect button: use the List blocks
Agent notes
CategoryCardtakes no props and renders the arrays in its data module; add a prop to pass in your own categories- Every
hrefin the data module is a hash placeholder and everyimagepoints at an Unsplash demo photo; swap in your routes and photos - Each page.tsx centers
CategoryCardin a paddedmin-h-svhwrapper; drop it inside your own storefront layout
Third-party API docs
- Embla Carousel v8: API reference, docs, used by 1 of 6 blocks
Markdown
https://web.dev.reui.io/blocks/ecommerce/category-card.mdMCP
search({ query: "category card", type: "block", category: "category-card" })Shadcn Category Card Blocks for Storefront Navigation
The category page is the storefront's table of contents, and a card that carries a count and a featured product converts better than a name on a tile. These blocks give the card its image treatment, its hover state and its subcategory list on shadcn primitives.
All Category Card Blocks
Open any block on its own page for a live preview, the components it is built from, and the install command.
- Category Browse Grid Shop by Category Grid with Hover Browse Buttons and Badges
- Filterable Collections Curated collection browse page with multi-filter toolbar and pagination
- Category Carousel Carousel collection filter with color-tinted category cards and hover browse buttons
- Featured Department Ecommerce catalog page with featured department and scrollable category index
- Collection Guides Collection Guides Browser with Image-Led List Rows and Category Links
- Seasonal Categories Seasonal Category Grid with Full-Card Hover Reveal and Breadcrumb Header
What the Category Card blocks cover
eCommerce screens, each a full block with fixture data:
- Shop by Category Grid with Hover Browse Buttons and Badges
- Curated collection browse page with multi-filter toolbar and pagination
- Carousel collection filter with color-tinted category cards and hover browse buttons
- Ecommerce catalog page with featured department and scrollable category index
- Collection Guides Browser with Image-Led List Rows and Category Links
- Seasonal Category Grid with Full-Card Hover Reveal and Breadcrumb Header
Built from
- shadcn/ui components Button, Breadcrumb, Empty, Field, Input Group, Popover, the same components your project already owns.
- Both twins, every style Each block ships on Base UI and on Radix, in 8 design styles, and names every part it composes on its page.
All Shadcn Block Groups
Browse the full ReUI Shadcn blocks library by product surface. Each group bundles category-level blocks you can mix and match across your project.
- Shadcn Application Blocks (303) Browse 303 Shadcn Application blocks across 23 categories.
- Shadcn Data Grid Blocks (47) Browse 47 Shadcn Data Grid blocks across 9 categories.
- Shadcn Charts Blocks (52) Browse 52 Shadcn Charts blocks across 10 categories.
- Shadcn Solutions Blocks (76) Browse 76 Shadcn Solutions blocks across 11 categories.
- Shadcn AI & Agents Blocks (22) Browse 22 Shadcn AI & Agents blocks across 3 categories.
- Shadcn eCommerce Blocks (87) Browse 87 Shadcn eCommerce blocks across 13 categories.
- Shadcn Marketing Blocks (67) Browse 67 Shadcn Marketing blocks across 8 categories.
Frequently Asked Questions
Do the cards work with any image source?
Yes. They take a plain image URL and an aspect ratio; the fixtures use local assets and the layout holds for remote ones.
How do I install a Category Card block?
Open the block on its page, copy the install command (the shadcn CLI with the @reui registry and your license key) or the AI prompt, and run it in your project. The block, its fixtures and every ReUI and shadcn dependency land in one command.
Is a license needed?
Category Card blocks are part of ReUI Pro: one payment, lifetime updates, every block in every style. The ReUI primitives and the free examples they build on install with no license.
Start building with ReUI Pro today.
Every Pro block, every style, and every future addition, with one license for unlimited projects.
Get All-Access
From $249, once. Lifetime updates.