👋 This is a community-driven shadcn/ui resource. For the official documentation, visit ui.shadcn.com
Compact Blog List
Compact blog list view with dense rows showing thumbnail images, titles, excerpts, metadata, and read time in table-like layout
Looking to implement shadcn/ui blocks?
Join our Discord community for help from other developers.
Dense content needs efficient layouts. This React blog list displays posts in compact rows with small thumbnails, titles, excerpts, author info, dates, and read time estimates. Built with shadcn/ui Card, Badge, Avatar components in streamlined layout, each row maximizes information density while maintaining readability. Hover effects, visual separators, and responsive stacking—perfect for news aggregators, article archives, or content libraries where users need to scan many posts quickly without overwhelming visuals.
Installation
npx shadcn@latest add https://www.shadcn.io/registry/blog-list-compact-01.jsonnpx shadcn@latest add https://www.shadcn.io/registry/blog-list-compact-01.jsonpnpm dlx shadcn@latest add https://www.shadcn.io/registry/blog-list-compact-01.jsonbunx shadcn@latest add https://www.shadcn.io/registry/blog-list-compact-01.jsonRelated blocks you will also like
Blog Grid with Search
Blog with search and filters
Blog with Sidebar
Blog layout with sidebar navigation
Rectangular Blog Layout
Horizontal blog card layout
Simple Blog Cards
Clean blog card grid layout
Blog with Pagination
Paginated blog post list
Blog Cards with Load More
Blog grid with view more button
