shadcn.io is not affiliated with official shadcn/ui
Dotted Path Timeline Block for Radix UI
A refund case of five steps joined by a column of small dots, one per day between them, with a dashed tick at the 7-day target and a Calendar days or Working days switch that recounts every dot.
Installation
Overview
Show how long a wait really was with this dotted-path timeline for React with Radix UI. It is written for Casedays, a fictional returns desk. A hairline frame with a plus mark on each corner holds one refund case of five steps on a vertical rail, from Opened to Refund issued. Between two steps the connector is a column of small dots, one for each day in between, with the count in words beside it ("17 days later"). A wait longer than 14 days stops at 14 dots and says how many more days there are. A dashed tick across the rail marks the 7-day target where it falls, labelled "Target: 7 days", and the foot reads "23 days open, 16 over target". A "Calendar days / Working days" switch recounts every connector from the dates, skipping weekends in UTC, and the foot follows. The other count is drawn unseen in the same place, so the panel never changes height. It is built from Guides and ToggleGroup with CSS for the dots. For returns, tickets, approvals and any record where the waiting matters more than the events. The case is example data.
FAQ
How do I change the steps and the target?
Edit STEPS at the top of the file: an id, a title, a note and an ISO day on each, oldest first. The dots, the "later" text and the foot are all derived from the dates. The target is the constant TARGET (in days of whichever count is chosen), and the dot limit is CAP.
How are working days counted?
By unitsBetween(), which counts the days after one step up to and including the next that are not a Saturday or a Sunday in UTC. It knows nothing about public holidays. If your desk has a holiday calendar, filter those days out in the same function.
Why does the panel not change height when I switch?
Both counts are rendered, one on top of the other in the same grid cell, and the one that is not chosen is invisible, removed from the tab order and hidden from assistive technology. The cell is as tall as the taller of the two.
What stays in the page?
Only the chosen count. Nothing is saved or sent. To use real cases, pass the steps of one case in from your store and keep the dates as ISO days.
Is it accessible?
The dots are decoration. The number of days between two steps is in words in each connector, and a visually hidden sentence says when the target falls inside a wait. The switch is a group of toggle buttons labelled "Count the days as", and the foot is a polite status line, so a change of count is announced.