Not affiliated with official shadcn/ui. Visit ui.shadcn.com for official docs.
Hero Block Categories
Hero block with category/use case grid for navigating to different sections
Looking to implement shadcn/ui blocks?
Join our Discord community for help from other developers.
Find your path. This React hero block displays a grid of categories or use cases that help visitors self-select and navigate to relevant content. Built with shadcn/ui Button, Badge, and Card components. Each category card has an icon, title, and brief description. This pattern helps diverse audiences quickly find what's relevant to them. Perfect for platforms serving multiple industries, multi-product companies, or marketplaces with distinct categories.
Templates for every industry
Find the perfect starting point for your project. Browse our collection of professionally designed templates by category.
Business
Enterprise solutions
2.4K templatesEducation
Learning & courses
1.8K templatesHealthcare
Medical & wellness
950 templatesE-commerce
Online stores
3.2K templatesReal Estate
Property listings
780 templatesTravel
Booking & tourism
1.1K templatesRestaurant
Food & dining
890 templatesFitness
Gyms & wellness
640 templates12,000+ templates • New designs added weekly
Installation
Related blocks you will also like
Hero Block Bento Grid
Hero with bento feature grid
Hero Block Two Columns
Hero with audience columns
Hero Block Feature Cards
Hero with feature grid
Hero Block Tabs
Hero with tabbed content