shadcn.io is not affiliated with official shadcn/ui
Numbered Rail Thread Blog Block for React
A numbered thread: six parts hung on a vertical rail with their "1/6" chips, the author once at the top, the first four in view and a Show 2 more button that opens the last two.
Installation
Overview
A thread block for React with Base UI, written for the Tippetmoor journal, a fly-fishing blog. A start-aligned header sits over one author row (initials once, the name, the date and "6 parts") and a vertical rail hanging six numbered parts from it, each number ("1/6" to "6/6") a chip on the rail. The first four parts are in view; a ghost "Show 2 more" button opens the last two in a height transition. Folded, they are out of the keyboard's reach and out of the page for screen readers. It's built from Avatar, Button and Guides. For a long post told in short parts, a Twitter-style thread or any numbered sequence. The thread is text: there's nothing to play.
FAQ
How do I change the parts?
Edit PARTS: one string per part. The chips ("3/6"), the "6 parts" count and the button's "Show 2 more" all derive from the array's length and the VISIBLE constant (how many are in view first).
How is the rail drawn?
One before: pseudo-element on the list's wrapper: a hairline that starts under the avatar and runs to the foot of the last part. Each number is a chip with the page's background and a ring, sitting on the rail, so the line seems to pass behind it.
How does Show 2 more work?
It's a ghost Button with aria-expanded and aria-controls; its label stays the same and a chevron turns. The last parts sit in a grid whose row goes from 0fr to 1fr, and while folded they are inert and invisible, so neither Tab nor a screen reader reaches them.
How do screen readers hear the numbers?
The chip is hidden from them and each part starts with a hidden "Part 2 of 6:", so a list of six items reads in order with its position.
Related
- Pro
Notes Composer Shortform Blog
Story formatsA microblog feed with a composer: a Textarea with a 280-character ring and a Post note button that puts your note at the top, and five notes with a like toggle whose count rolls.
- 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
Rail Timeline Blog
Archives by dateA local-history society's notebook as a vertical rail: a band per year, the year sticky at the rail's start, and dated entries hung off the rail on dots.
- 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
Minimal Article Blog
Article partsOne 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.
- Pro
Reading List Blog
Reading toolsFive saved articles with a bookmark toggle on each: un-saving strikes the row through in place with an Undo link, and the foot reads the derived totals, like 5 saved, 46 min to read.