shadcn.io is not affiliated with official shadcn/ui
Condensed Timeline Stepper Block for Solid
A nine-row release checklist with a switch between Comfortable and Condensed rows, where the open row's card names its owner and Mark done completes it.
Installation
Overview
Fit a long checklist on screen without losing the plot, with this condensed stepper for Solid with Ark UI. A plus-marked frame opens on the release checklist, "2 of 9 done, 110 of 125 min to go", and a Toggle Group that switches the rows between Comfortable and Condensed. The Steps list is nine hairline-ruled rows of Branch cut, Changelog, Tests, Migrations, Staging, Sign-off, Deploy, Smoke test and Announce, each with a dot (solid when done, ringed when open, hollow ahead), its title and its time box. Comfortable adds a line under each title and a larger dot; Condensed shrinks a row to 28 px so all nine fit. The list sits in a fixed-height box, so the switch never moves the page. The open row's card shows who does it, its time box and how to undo it in a Data List, and "Mark done" is the block's one Shine Button. For release runbooks, QA lists and any checklist that grows. This is a checklist you work through, not a log of events.
FAQ
How do I change the checklist?
Edit TASKS: each has a title, a one-line summary for Comfortable, a sentence, an owner, a time box in minutes and how to undo it. The minutes to go, the total and the closing figures are worked out from the time boxes.
How does the density switch work?
It changes only the row classes: the height, the dot size and whether the summary shows. The list is a fixed-height scrolling box, so Comfortable scrolls while Condensed fits, and the card and foot below never move. The open row is scrolled into view inside the box after you move, never the page. The switch starts on Condensed so a phone sees the whole list first.
What stays local?
The open row and the density are component state and are lost on reload. Nothing is deployed and nobody is notified. To make it real, record each completed check from the go function and load the finished checks into the initial state.
How does the keyboard work?
The list is one tab stop on the open row. Up and Down arrows move between the rows you can reach, Home and End jump to the ends, and Enter or Space opens the focused one. The density buttons are a separate tab stop with their own arrow keys, and a polite line says "Step 3 of 9: Tests, 110 min to go" after each move.