Large featured article with side-by-side image and content, followed by a three-column grid of secondary posts. Read more buttons and author details included.
Blog index that promotes the first entry in posts into a large side-by-side hero card (cover image on one side, content on the other) and drops the remaining entries into a three-column grid underneath it. The hero and grid cards share the same author, tag, and date structure, just at different sizes.
Free block
This block is free. No license or account is required: install it with the CLI and use it in unlimited projects.
Radix flavor
npx shadcn add "https://ui.beste.co/r/blog4"Base UI flavor
npx shadcn add "https://ui.beste.co/r-base/blog4"This installs the block to components/beste/block/blog4.tsx, plus the badge, avatar, and button shadcn/ui primitives it uses for tags, author avatars, and the featured post's "Read more" button.
The installed file exports blog4Demo alongside the block: the exact props behind the preview above. Spread it to get a working featured blog layout in one line.
import { Blog4, blog4Demo } from "@/components/beste/block/blog4";
export default function BlogIndexPage() {
return <Blog4 {...blog4Demo} />;
}Then replace the demo with your own props. Written out, a trimmed setup looks like this:
import { Blog4 } from "@/components/beste/block/blog4";
export default function BlogIndexPage() {
return (
<Blog4
badge={{ label: "Blog" }}
heading="Featured stories"
description="Hand-picked reads from the team."
labels={{ readMoreLabel: "Continue reading" }}
posts={[
{
image: {
src: "https://images.unsplash.com/photo-1517694712202-14dd9538aa97?w=800&fit=crop",
alt: "Code on screen",
},
title: "Shipping faster with feature flags",
summary: "How we roll out risky changes without breaking prod.",
date: "March 2, 2026",
readTime: "6 min read",
author: { name: "Sam Rivera", title: "Staff Engineer" },
tags: [{ label: "Engineering", href: "/blog/tag/engineering" }],
href: "/blog/feature-flags",
},
{
image: {
src: "https://images.unsplash.com/photo-1460925895917-afdab827c52f?w=800&fit=crop",
alt: "Analytics dashboard",
},
title: "Reading a funnel report",
summary: "A short primer on where users actually drop off.",
date: "February 20, 2026",
readTime: "4 min read",
href: "/blog/funnel-report",
},
]}
/>
);
}| Prop | Type | Default | Description |
|---|---|---|---|
badge | { label: string; variant?: "default" | "secondary" | "outline" } | – | Section eyebrow badge |
heading | string | – | Section heading |
description | string | – | Section intro text |
posts | BlogPost[] | [] | First entry becomes the featured hero, the rest fill the grid |
labels | { readMoreLabel?: string } | – | Text for the featured hero's "Read more" button |
className | string | – | Extra classes for the outer <section> |
type BlogPost = {
image: { src: string; alt: string };
title: string;
summary: string;
date?: string;
readTime?: string;
author?: Author;
tags?: Tag[];
href?: string;
};
type Author = {
name: string;
title?: string;
avatar?: { src: string; alt: string };
href?: string;
};
type Tag = { label: string; href?: string };posts[0] becomes the featured hero and posts.slice(1) fills the grid below it. If posts has only one entry, the grid section is skipped entirely (gridPosts.length > 0 check).aspect-video on mobile and stretches to fill its column edge to edge on md+ (md:aspect-auto), since the layout switches to two columns at that breakpoint."Read more" inline in the JSX (labels?.readMoreLabel ?? "Read more") even when labels is omitted entirely, unlike most text props in this registry which have no built-in fallback.tags.slice(0, 2)) while the featured hero shows every tag on the post.size-10 in the featured hero (with author title shown), size-6 in grid cards (name and read time only, no title).blog10
Large alternating left-right blog cards with full article summaries. Image and content switch sides for visual variety. Read more buttons included.
blog43
A blog listing with an eyebrow over a hairline rule, a two-column heading, and three linked article cards with a hover-zoom image, a monospace category, a title, an excerpt, and byline.
blog3
Three-column responsive grid of blog cards featuring author avatars, tag badges, and hover zoom effects. Clean card design with date and read time metadata.
blog22
Vertically stacked blog cards with 2:1 aspect ratio images. Full article summaries with author avatars and read more buttons. Long-form content showcase.
blog25
Two-column layout with featured image on left and article list on right. Divider-separated entries with arrow hover effects.
blog13
Main content area with horizontal post cards plus sidebar. Categories show post counts and popular tags section with clickable badges.