👋 This is a community-driven shadcn/ui resource. For the official documentation, visit ui.shadcn.com
Blog Grid with Search
Blog grid with search bar, category filter tabs, and responsive card layout for filtering and discovering content
Looking to implement shadcn/ui blocks?
Join our Discord community for help from other developers.
Finding content shouldn't be difficult. This React blog component combines search input with category filter tabs above responsive post grid. Built with shadcn/ui Input, Tabs, Card, Badge components, users can search by keywords, filter by category tabs, and browse posts in clean grid layout. Real-time filtering, active tab indicators, and mobile-responsive columns—perfect for content libraries, knowledge bases, or blogs where powerful search and categorization help users find relevant articles quickly.
Installation
npx shadcn@latest add https://www.shadcn.io/registry/blog-grid-search-01.jsonnpx shadcn@latest add https://www.shadcn.io/registry/blog-grid-search-01.jsonpnpm dlx shadcn@latest add https://www.shadcn.io/registry/blog-grid-search-01.jsonbunx shadcn@latest add https://www.shadcn.io/registry/blog-grid-search-01.jsonRelated blocks you will also like
Blog with Sidebar
Blog layout with sidebar navigation
Simple Blog Cards
Clean blog card grid layout
Compact Blog List
Dense blog list view
Blog Categories Navigation
Category-based blog navigation
Blog Cards with Load More
Blog grid with view more button
Blog with Filter Chips
Multi-select filtering with removable chips
