shadcn.io is not affiliated with official shadcn/ui
Numbered Rail Thread Blog Block for Svelte
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 Svelte with Ark 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.