For AI Agents
Hand your agent this brief or the ReUI MCP, not a screenshot. Installs with a ReUI Pro or Ultimate license.
Best for: A large featured department beside a scrolling index of the rest, with item counts, starting prices and a catalog total
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 products with star ratings and prices in a plain grid: use the Four-Column Catalog block
- A storefront banner with a deal countdown and three promo tiles: use the Countdown Deal Hero block
- 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
totalItemCountsums the number parsed from eachitemCountstring when the module loads, so keep the leading number in those strings- The first entry in
departmentsbecomes the featured hero and the rest fill the index; only the hero shows itsbadge - At lg the hero and index share one fixed 620px height, so the
ScrollAreascrolls extra departments instead of growing 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
https://web.dev.reui.io/blocks/ecommerce/category-card/category-card-4.mdget_block("category-card-4")npx shadcn@latest add @reui/category-card-4Shadcn Components in the Featured Department Block
Shadcn Featured Department Block
Ecommerce catalog page with featured department and scrollable category index. Part of the ReUI Shadcn eCommerce Category Card blocks collection.
Catalog landing pairing a large featured department hero with a scrollable sidebar of category tiles, breadcrumb header, item and price counts. ReUI Badge; shadcn Breadcrumb, Button, ScrollArea. For shop home, category browse, department directory.
It is composed from Badge, Breadcrumb, Button, Scroll Area, so every part of it is a primitive you can restyle with your own design tokens.
What You Can Build With the Featured Department Block
- Install it with the ReUI registry command in the toolbar above, then swap the placeholder content, data wiring, and business logic for your own.
- Compare it across all eight ReUI styles and both the Base UI and Radix bases in the customizer before committing to one direction.
- Combine it with the other Shadcn eCommerce Category Card blocks to assemble a full screen instead of a single section.
All Shadcn eCommerce Category Card Blocks
The rest of this category, each on its own page with 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
- 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
Related Shadcn eCommerce Block Categories
- Checkout (7) Checkout flows with shipping details, payment forms, and order confirmation steps.
- Comparison (6) Product comparison tables with side-by-side feature and specification layouts.
- Coupon (6) Coupon code input fields, discount badges, and promotional offer display blocks.
- Filter Sidebar (7) Filter and facet sidebars for refining product searches by price, size, and attributes.
- Product Card (10) E-commerce product cards with images, pricing, variants, and add-to-cart actions.
- Product Detail (6) Product detail pages with image galleries, specifications, and purchase options.
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
When should I use the Featured Department block?
Use it for a large featured department beside a scrolling index of the rest, with item counts, starting prices and a catalog total.
The Category Card category fits:
- 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
For individual products with star ratings and prices in a plain grid, use the Four-Column Catalog block. For a storefront banner with a deal countdown and three promo tiles, use the Countdown Deal Hero block. For individual items for sale on tiles, each with its own price and buy or wishlist controls, use the Product Card blocks. For dashboard tiles for KPIs, records or setup guides, away from any storefront, use the Card blocks. For rows of funds, transactions or integrations, each with a figure or a connect button, use the List blocks.
What is the Featured Department block built with?
Can I restyle the Featured Department block?
How should I use Shadcn category card blocks in a real project?
Start building with ReUI Pro today.
Every Pro block, every style, and every future addition, with one license for unlimited projects.
From $249, once. Lifetime updates.