👋 This is a community-driven shadcn/ui resource. For the official documentation, visit ui.shadcn.com
Large Blog Preview
Large hero-style blog preview with prominent featured image, category badge, headline, excerpt, read more link, and author attribution
Looking to implement shadcn/ui blocks?
Join our Discord community for help from other developers.
Featured stories need impact. This React blog hero combines large featured image with detailed post preview showing category, headline, excerpt with read more link, author avatar, name, and publication date. Built with shadcn/ui Avatar component in responsive two-column layout, content scales from stacked on mobile to side-by-side on desktop. Editorial styling, generous spacing, and prominent imagery—perfect for landing pages, article headers, or blog homepages where hero section drives attention to priority content and increases click-through rates.
Installation
npx shadcn@latest add https://www.shadcn.io/registry/blog-preview-large-01.jsonnpx shadcn@latest add https://www.shadcn.io/registry/blog-preview-large-01.jsonpnpm dlx shadcn@latest add https://www.shadcn.io/registry/blog-preview-large-01.jsonbunx shadcn@latest add https://www.shadcn.io/registry/blog-preview-large-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 Posts with Tags
Blog posts with multiple tag badges
Featured Blog Posts
Highlighted blog post grid
Rectangular Blog Layout
Horizontal blog card layout
Blog with Sidebar
Blog layout with sidebar navigation
