Blog 117 - Centered Author Profile With Topic Filter

Pro

Centered author header with portrait, bio, inline stats, and follow buttons, above topic filter buttons that narrow a two-column grid of the author's posts.

Shadcn Blog 117 block

Component data

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

Blog 117 block design & features

Blog117 is a centered author page built with Shadcn UI Button components. A round portrait sits above the author's name, role and company, location, and a short biography, followed by an inline row of stats for articles, readers, and the year they started, then an RSS follow button and square icon buttons for website, Twitter, and LinkedIn. Below the profile, a row of pill-shaped topic buttons filters a two-column grid of post cards, each with a wide cover image, a category, date, and read time line, a large title, and a three-line summary.

The filter buttons switch between the filled and outline button styles to show the active topic, and the grid updates immediately without a page load. Cards have no borders or backgrounds, with generous gaps between them, and the header keeps everything on a single centered axis with the name at the largest heading size.

The overall feel is personal and balanced, closer to a writer's home page than a blog index. The working topic filter is the distinctive part and suits authors who cover several subjects. Complexity is moderate: it needs an author portrait, a bio, a list of topics that match post categories, and a cover image for each post.

On phones the grid becomes one column and the filter buttons wrap onto extra lines under the header.