Blog Sections
Browse blog listing layouts built on shadcn/ui, from a clean three-card section to a horizontally scrollable stories grid.
Launch Faster with Complete Templates
Love these blocks? Get our free dashboard and landing page templates with 30+ pre-built pages and all the components you need. Premium templates with advanced features launching soon at $69.
Shadcn UI Blog Section Layouts
A homepage may need three recent articles; a busy content hub needs a grid that can keep growing. These Shadcn UI blog sections cover both, along with horizontal stories and news-card layouts for a more editorial presentation.
Editorial layouts in this collection
- Three-Card Blog Layout: a clean three-card layout with categories and CTA links.
- Recent Blog Grid: a grid of recent posts with images, titles, authors, and tags.
- Stories Grid: a horizontal scrollable stories grid with gradient borders and avatars, similar to a stories feed.
- News Grid with Cards: a responsive grid of news cards with images and metadata.
Pick a layout for the publishing rhythm
- Homepage "latest posts" widget: the three-card layout keeps the footprint small.
- Blog index / content hub: the recent blog grid or news grid scales to more posts.
- Highlighting a few featured pieces: the stories grid draws the eye with its horizontal scroll.
Scrolling and card behavior
Built with React and TypeScript, styled with Tailwind CSS, using shadcn/ui's Card, Badge, and Avatar primitives. If your content is easier to compare in rows than browse in a grid, the listing card layouts are a better fit. For a content site with newsletter capture and deeper navigation, continue into the footer blocks.