Blog 102 - Blog magazine layout with sidebar

Pro

Blog homepage layout with a feed of five thumbnail rows beside a sticky sidebar holding an about note, numbered most-read list, topic pills, and a newsletter signup form.

Shadcn Blog 102 block

Component data

ID
blog102
Access
pro
Created
Oct 4, 2026
Type
block
Libraries
Radix UI, Base UI, React Aria

Blog 102 block design & features

Blog102 is a classic blog homepage built with Shadcn UI Badge, Button, and Input components. A large heading and description sit above two columns. The main column is a ruled feed of five posts, each with a four by three thumbnail on the left and a category badge, date, linked title, summary, and author avatar with read time on the right, followed by an outline button to see all articles. The narrower right column is a sticky sidebar with four widgets: an about note, a numbered most-read list with read counts, a wrapping set of topic pills, and a newsletter card.

The feed follows the editorial row style, with secondary category badges, semibold titles, relaxed muted summaries, and small round avatars. Sidebar widgets share small uppercase labels and hairline dividers, and only the newsletter sits on a muted rounded surface so it reads as the call to action. Submitting the email field swaps the form for a short confirmation line with a check.

It is a familiar magazine pattern done with restraint, the sort of layout readers recognise immediately as a blog front page. Complexity is moderate and content-driven: the feed needs posts with thumbnails, authors, and summaries, and the sidebar needs real popularity data and a topic list.

Below large screens the sidebar moves under the feed and stops being sticky, and on phones each feed thumbnail stacks above its text.