👋 This is a community-driven shadcn/ui resource. For the official documentation, visit ui.shadcn.com
Blog with Sidebar
Blog layout with sidebar showing recent posts, categories, tags, and newsletter signup alongside main content grid
Looking to implement shadcn/ui blocks?
Join our Discord community for help from other developers.
Blog navigation needs structure. This React blog layout combines main content grid with sidebar featuring recent posts, category list, popular tags, and newsletter signup form. Built with shadcn/ui Card, Badge, Input, Button components in responsive columns, the sidebar collapses below main content on mobile and appears alongside on desktop. Search functionality, category filtering, and social links—perfect for content sites, personal blogs, or news platforms where sidebar navigation and discovery features improve content exploration and subscriber conversion.
Installation
npx shadcn@latest add https://www.shadcn.io/registry/blog-sidebar-01.jsonnpx shadcn@latest add https://www.shadcn.io/registry/blog-sidebar-01.jsonpnpm dlx shadcn@latest add https://www.shadcn.io/registry/blog-sidebar-01.jsonbunx shadcn@latest add https://www.shadcn.io/registry/blog-sidebar-01.jsonRelated blocks you will also like
Simple Blog Cards
Clean blog card grid layout
Blog Cards with Load More
Blog grid with view more button
Blog Grid with Search
Blog with search and filters
Compact Blog List
Dense blog list view
Blog Newsletter Signup
Newsletter subscription section
Blog Categories Navigation
Category-based blog navigation
Questions you might have
Rectangular Blog Layout
Horizontal blog post layout with rectangular side-by-side images and content showing category badges, titles, descriptions, and author info
Contact Callback Request
Contact form with callback request scheduler allowing users to select preferred date and time for phone consultation
