👋 This is a community-driven shadcn/ui resource. For the official documentation, visit ui.shadcn.com
Rectangular Blog Layout
Horizontal blog post layout with rectangular side-by-side images and content showing category badges, titles, descriptions, and author info
Looking to implement shadcn/ui blocks?
Join our Discord community for help from other developers.
Horizontal layouts maximize screen space. This React blog component displays posts in side-by-side rectangular cards with images on left and content on right, showing category badges, titles, descriptions, author avatars, and publication dates. Built with shadcn/ui Badge, Avatar components in responsive grid, cards stack vertically on mobile and flow horizontally on larger screens. Image-text balance, consistent spacing, and author attribution—perfect for news sites, editorial blogs, or content platforms where scannable horizontal cards improve reading flow and content density.
Installation
npx shadcn@latest add https://www.shadcn.io/registry/blog-rectangular-01.jsonnpx shadcn@latest add https://www.shadcn.io/registry/blog-rectangular-01.jsonpnpm dlx shadcn@latest add https://www.shadcn.io/registry/blog-rectangular-01.jsonbunx shadcn@latest add https://www.shadcn.io/registry/blog-rectangular-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
Large Blog Preview
Hero-style blog preview
Blog with Sidebar
Blog layout with sidebar navigation
