👋 This is a community-driven shadcn/ui resource. For the official documentation, visit ui.shadcn.com
Blog Categories Navigation
Blog with category navigation cards showing category icons, titles, post counts, and featured posts for each category
Looking to implement shadcn/ui blocks?
Join our Discord community for help from other developers.
Category organization drives discovery. This React blog component displays category cards with custom icons, titles, descriptions, post counts, and featured article previews from each category. Built with shadcn/ui Card, Badge components in responsive grid, users can explore content by topic with visual category indicators. Icon headers, post counts, and featured previews—perfect for multi-topic blogs, magazines, or content platforms where category-based navigation helps users find relevant content in their areas of interest.
Installation
npx shadcn@latest add https://www.shadcn.io/registry/blog-categories-nav-01.jsonnpx shadcn@latest add https://www.shadcn.io/registry/blog-categories-nav-01.jsonpnpm dlx shadcn@latest add https://www.shadcn.io/registry/blog-categories-nav-01.jsonbunx shadcn@latest add https://www.shadcn.io/registry/blog-categories-nav-01.jsonRelated blocks you will also like
Blog Grid with Search
Blog with search and filters
Blog with Sidebar
Blog layout with sidebar navigation
Simple Blog Cards
Clean blog card grid layout
Blog Posts with Tags
Blog posts with multiple tag badges
Compact Blog List
Dense blog list view
Featured Blog Posts
Highlighted blog post grid