Hand-picked articles from our editorial team.
Exploring how design systems are evolving to meet the demands of increasingly complex web applications. Learn about the latest trends and best practices.
Lisa Park
January 15, 2026 · 8 min read
Learn the best practices for designing APIs that can handle millions of requests.
Practical strategies to improve the performance of your React applications.
Discover advanced TypeScript techniques that will make your codebase more maintainable.
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).blog60
A blog section pairing one linked feature with a hover-zoom image, category label, and byline against a hairline list of five recent posts stamped with their date.
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 category label, a title, an excerpt, and byline.
blog10
Large alternating left-right blog cards with full article summaries. Image and content switch sides for visual variety. Read more buttons included.
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.