shadcn.io is not affiliated with official shadcn/ui
Branching Timeline Block for Radix UI
A document review that forks into Legal and Security lanes and joins at the later one, with the publish date, the wait and the due dates re-derived in working days by a select for how long Security takes.
Installation
Overview
Show what a parallel review is really waiting for with this branching timeline for React with Radix UI. It is written for Joinpoint, a fictional document review tracker. A hairline frame with a plus mark on each corner holds a policy draft submitted on Thursday 8 October that goes to Legal and Security at once. Lines drawn with SVG split from the draft, run down the two lanes and meet at "Both approved", which waits for the slower lane, with Publish a working day after in a dashed box. The lane that finished early has a dashed line to the join and says how many days it waits. A Native Select in the header, "If Security takes", offers 1, 3, 5 or 8 days, and a band above the figure re-derives the join date, the publish date and the wait ("Waited on Security 2 days longer") in working days, skipping weekends. Dates after the fixed "now" read Due. The figure keeps its height for every choice. It is built from Native Select, Guides and SVG, with a CSS entrance and your theme's tokens for every colour. For approvals, release sign-offs and any work with parallel checks. The review is example data.
FAQ
How do I change the review?
Edit SUBMITTED, LEGAL_DAYS and the choices in CHOICES at the top of the file. Everything else is derived by planOf: each lane's end, the join as the later of the two, the publish date one working day after it and the wait between the lanes.
Are the days working days?
Yes. addWorking steps over Saturdays and Sundays using integer day numbers, so a review that starts on a Thursday and takes three days ends on the Tuesday. Holidays are not known; add them to the helper if you need them.
Why does the faster lane have a dashed line?
Because it has finished and is waiting. The join can only happen when the slower lane is done, so the faster lane's line to the join is dashed and its card says how many days it waits. When both take the same time, both lines are solid and the text says they finish together.
Is it accessible?
The select has a visible label and works with a keyboard. Lanes are headings, each node's date is written as a word and a date, and the lines are decoration. A polite status line states the new join and publish dates when the choice changes.