shadcn.io is not affiliated with official shadcn/ui
Vertical Dots Timeline Block for Radix UI
A house-move plan on a vertical rail with oversized status dots (done, now, next), a Hide finished steps switch that folds the finished steps into one node that opens in place, and a count of the days left.
Installation
Overview
Show where a plan stands, and fold away what is already done, with this vertical dots timeline for React with Radix UI. It is written for Moveday, a fictional house-move planner. A hairline frame with a plus mark on each corner holds one vertical rail with eight steps, from giving notice to handing over the keys. Each dot is a large round tile that holds its state: a check for the five finished steps, a ringed dot for the one under way and an empty dashed circle for the two still to come, and the word under each title says it too ("Done on Fri 9 Oct", "Now, due Wed 28 Oct"), so state never rests on colour. The rail is solid up to the step under way and dashed after it. A Switch in the header, "Hide finished steps", folds the five finished steps into one node ("5 steps done, 4 Sep to 9 Oct") that opens in place with its chevron, so the rail never breaks. The foot is a polite status line that counts the steps by state and the days left to the move, worked out from one fixed date. The panel keeps its height whether the steps are folded or not. It is built from Switch, Guides and lucide icons, with a CSS entrance only. For planners, onboarding records and any list where the past should get out of the way. The plan is example data.
FAQ
How do I change the steps?
Edit STEPS at the top of the file. Each step has an id, a title, a short note, a date (the day it was done, or is due) and a kind, which is one of the constants DONE, NOW and NEXT. A kind pairs an icon, a tile style and the word shown. The counts in the foot, the folded node's dates and the days to the move are all derived from this list and MOVE_DAY, so none of them is typed twice.
What does Hide finished steps do?
It replaces the finished steps with one node that names how many there are and the dates they span. The node is a button: it opens in place to show the finished steps again, between the node and the step under way, and the rail keeps running through it. Turning the switch off shows every step with no folded node. The panel is as tall in all three states because an unseen copy of the tallest one holds its height.
Why is the number of days fixed?
The page has one fixed "now" (AS_OF), so the example reads the same on the server and in every browser, and a poster of it never changes. Replace it with your own clock when you wire it up: daysBetween works from the date part of two ISO strings, so only that one constant has to change.
What stays in the page?
The switch and the open node are local state. Nothing is saved or sent. To keep the choice, store the switch's value with the user's other preferences and read it back into the initial state.
Is it accessible?
The steps are an ordered list with a heading each. The switch has a name, "Hide finished steps", and works with the keyboard; the folded node is a button with aria-expanded. The status line is a polite live region that is there from load. The dots are decoration, because the word under each title already says the state.