shadcn.io is not affiliated with official shadcn/ui
Zigzag Timeline Block for Radix UI
A support ticket passed five times between Support and Engineering, drawn as nodes in two lanes joined by diagonals, with the time in each court worked out as two bars and a note that opens for each hand-off.
Installation
Overview
See where a piece of work spent its time with this zigzag timeline for React with Radix UI. It is written for Batonlane, a fictional ticket hand-off tracker. A hairline frame with a plus mark on each corner holds one support ticket, "Refunds stuck in pending", passed five times between Support at the start and Engineering at the end. Each hand-off is a node in the lane that took it, joined to the one before by a diagonal line, with its title, lane and time. A band above works out from the times how long the ticket has sat in each court, as two bars in proportion with the durations written out, up to one fixed moment of "now". Pressing a hand-off opens its note under the lanes and draws the diagonal that led to it heavier. The notes share one cell, so the panel keeps its height whichever you open. It is built from Guides and native buttons, with an SVG for each diagonal, a CSS entrance and your theme's tokens for every colour. For support queues, approvals and any work that changes hands. The ticket is example data.
FAQ
How do I change the hand-offs?
Edit HANDOFFS at the top of the file, oldest first. Each has an id, a lane of Support or Engineering, an ISO at time in UTC, a title and a note. Add a lane by adding to the Lane type and LANES; the columns follow. The diagonals, the time in each court and the order text are derived.
How is the time in each court worked out?
Each lane holds the ticket from each of its hand-offs until the next one, and the last one until the fixed AS_OF. The two totals are shown as bars in proportion to their sum, with the durations in days, hours and minutes.
How are the diagonals drawn?
Each is a line in a stretched SVG box that spans both lanes, from the centre of one column to the centre of the next. Because the box is stretched, the line keeps a constant thickness on screen. In right-to-left languages the box is mirrored with the lanes.
Is it accessible?
The hand-offs are an ordered list of buttons, each with its title, lane and time in words; the chosen one is reported as pressed and its note is the only one readable. Diagonals are decoration. The status line says which hand-off of how many is open.