shadcn.io is not affiliated with official shadcn/ui
Minimal Article Blog Block for Radix UI
One article's opening and nothing else: a narrow reading measure with title, dek and byline, two paragraphs with a sunk initial, and a quiet Continue reading link.
Installation
Overview
A distraction-free reading block for React with Radix UI, written for Plainsong, a poetry-and-essays site. A narrow measure (about 36 rem) holds one article's opening: the title as the block's heading, a one-line dek, the author's initials with the date and the reading time, then two paragraphs set in the catalog's Prose, the first with a sunk initial, and a quiet Continue reading link. There is no cover, no sidebar, no tags and no controls, and the only line on the page is the block's top rule, so the words do all the work. It's built from Guides, Prose, DropCapText and Avatar, with CSS for the entrance and the sunk initial. For essay sites, newsletters' web editions, poetry journals and any page that shows a piece before it asks for a click.
FAQ
How do I change the article?
Edit the constants at the top of the file: AUTHOR, PUBLISHED (an ISO date, formatted in UTC), READING_MINUTES, OPENING and SECOND, and the title and dek in the markup. The opening paragraph is a DropCapText, which takes its text as a prop; a further paragraph is a plain p in the same Prose.
How does the sunk initial work?
The first letter is the paragraph's own ::first-letter, sunk three lines with initial-letter (with a float as the fallback), so the text stays whole for screen readers, search and copying. It is the foreground colour, not the primary one, and it inks in from the top once as the block loads; with reduced motion it is simply there.
Why is the text column so narrow?
Roughly 60 to 70 characters a line is where long reading is easiest, so the measure is 36 rem with 18 px body text from sm. The page's rails stay at the usual width; only the text narrows. Text is start-aligned, never justified.