shadcn.io is not affiliated with official shadcn/ui
Minimal Article Blog Block for React
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 Base 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.
Related
- Pro
Large Preview Blog
Featured storyOne long read at poster size: a wide drawn cover in a frame and a raised panel with the title, the dek and a byline whose author link opens a hover card.
- Pro
Framed Cards Blog
Card gridsSix text-only posts as raised cards in one tinted frame, two across: category, title as the card's one link, a short dek and a line with author, date and reading time.
- Pro
Author Profile Blog
Authors and staffOne writer's profile in a split: a large initials avatar, name and role, a bio, icon links with tooltips, a Follow toggle that reads Following, three figures from her posts, and her four newest posts as a list.
- 3Pro
Series Tracker Blog
Tutorials and seriesA reader's place in a six-part series: the catalog's vertical Steps with a tick for each part read, the current part's panel with a typographic cover, a thin progress bar and a Shine Button that continues to the next part.
- Pro
Scrolling Article Table of Contents Blog
Article partsA framed, fixed-height essay with six sections beside a rail that follows the section in view with a sliding bar, and a Jump to select on phones; choosing a section scrolls the essay, never the page.
- Pro
Centered Story About
Company storyA founding story told as one centred long read: a heading and byline, a first paragraph with a drop cap, a pull quote on a band ruled rail to rail, then the rest in a readable column ending on a closing line and a link.