shadcn.io is not affiliated with official shadcn/ui
Featured Post Blog Block for React Aria
One lead post as a split, its copy beside a drawn greyscale cover behind a divider, with three more posts as cells on shared hairlines under it.
Installation
Overview
A featured-post section for React with React Aria, written for the Birchfield Journal, a gardening magazine. A compact header with an outline All stories link sits over the lead story: its copy at the start (category, title, dek, byline) and, at the end behind a divider, a drawn plan view of the raised bed it tells about. Three more posts follow as cells that share their hairlines, run from rail to rail and end the block, so the next section's top rule closes them. The cover is greyscale line art in your theme's tokens, never a photo, and the whole lead is one link. On a phone the cover heads the lead and the three cells become rows. It's built from Guides, Badge, Avatar and Button, with CSS for the entrance and the hover. For magazines, journals and any page that leads with one story.
FAQ
How do I change the lead and the three posts?
Edit LEAD and MORE at the top of the file. A post has a title, an author, a category, a date as an ISO string ("2026-09-12"), a reading time in minutes and an href; the lead also has a one-line dek. Dates are fixed, never computed from today, and are formatted in UTC so the server and the browser print the same day. Any number of cells works: each one draws its own hairlines, and the grid is three across from sm.
How is the cover drawn, and how do I use a photo?
BedCover is one SVG at module scope: graph paper, the bed's boards, four sections with five plants each (path strings built from a few numbers), a dimension line and a caption. Every colour is a theme token, so it follows light and dark and any preset, and every stroke stays a hairline at any size. To use a photo instead, put an img with object-cover and size-full inside PostCover: the frame keeps its 4:3 shape, ring and radius.
Why is only the title a link, and what is Read story?
One link per card gives a screen reader one clear name per post and keeps the page short to tab through. The title's after: box stretches over the whole card, so a click anywhere opens the post, and the focus ring is drawn on that box. Read story is the lead's visual cue, not a second link: it is hidden from assistive technology and underlines when the card is hovered. To add a real second link, give it relative z-10 so it sits above the stretched one.
How does it fit on a phone?
The cover comes first and the copy follows under a drawn rule, then the three posts become rows, so the whole block is about two screens. From lg the lead is a split with the cover at the end behind a divider whose + mark meets the top rule. The cells stay stacked below sm and sit three across from sm. Nothing scrolls sideways at 320 pixels.