Blog 27 - Blog post grid with filters and load more

Pro

Bordered blog post cards with a cover image, title, excerpt, and read button in a three-column grid, with category radio filters and a load-more button.

Shadcn Blog 27 block

Component data

ID
blog27
Access
pro
Created
Sep 26, 2025
Updated
Oct 4, 2026
Type
block
Libraries
Radix UI, Base UI, React Aria

Blog 27 block design & features

Blog27 is a filterable post archive built with Shadcn UI RadioGroup, Label, Card, AspectRatio, and Button. A heading sits above a horizontal row of category radio buttons, starting with "All". Below that, a grid shows six bordered cards at a time, each with an edge-to-edge cover in a roughly 3:2 frame, a linked title, a two-line summary, and a small ghost button with the read label and an arrow. A secondary "Load More" button under the grid reveals the next six.

Cards are flat, with a hairline border, rounded corners, and no shadow. Text sits in a generously padded area below the cover, and the ghost read button gets a soft background on hover. Covers dim slightly and titles underline on hover, each as its own link. Radio buttons sit inline with medium labels, quieter than pill tabs. No entrance animation.

The most functional block in this subgroup and the only one with working filtering and paging. Picking a category narrows the grid and resets it to the first six posts. In the default "All" view, posts are interleaved across categories so the first page mixes topics. Moderate complexity, mostly code-driven, but it needs a sizable set of posts spread across several categories to feel right.

The filter row scrolls sideways on narrow screens instead of wrapping. The grid drops from three columns to two at medium widths and one on mobile, and the Load More button disappears once the filtered list is exhausted.