👋 This is a community-driven shadcn/ui resource. For the official documentation, visit ui.shadcn.com
Simple Blog Cards
Simple blog post cards with image headers, category badges, author avatars, and publish dates in a responsive grid layout
Looking to implement shadcn/ui blocks?
Join our Discord community for help from other developers.
Blog content shouldn't look cluttered. This React blog cards component displays posts in clean cards with featured images, category badges, and author information. Built with shadcn/ui Card, Badge, Avatar components with responsive grid layout, each card shows post title, description, author avatar with name, and publication date. Image-first design, consistent spacing, and mobile-friendly columns—perfect for blogs, news sites, or content platforms where scannable post previews increase engagement and reduce bounce rates.
Installation
npx shadcn@latest add https://www.shadcn.io/registry/blog-cards-simple-01.jsonnpx shadcn@latest add https://www.shadcn.io/registry/blog-cards-simple-01.jsonpnpm dlx shadcn@latest add https://www.shadcn.io/registry/blog-cards-simple-01.jsonbunx shadcn@latest add https://www.shadcn.io/registry/blog-cards-simple-01.jsonRelated blocks you will also like
Blog Cards with Load More
Blog grid with view more button
Blog Posts with Tags
Blog posts with multiple tag badges
Rectangular Blog Layout
Horizontal blog card layout
Featured Blog Posts
Highlighted blog post grid
Large Blog Preview
Hero-style blog preview
Blog with Sidebar
Blog layout with sidebar navigation
