shadcn.io is not affiliated with official shadcn/ui
Nested Timeline Block for Ark UI
A product plan as three phases on a rail that each open to a smaller rail of dated tasks, where every phase takes its dates, its done count and its status word from its own tasks, plus an Expand all button.
Installation
Overview
Let a parent timeline summarise its children with this nested timeline for React with Ark UI. It is written for Phasenest, a fictional project planner. A hairline frame with a plus mark on each corner holds one rail of three phases: Discover, Build and Launch. Each phase is a Collapsible that opens to a smaller rail of dated tasks with a status word on each (Done, In progress, Not started). A phase stores no dates and no counts of its own: its span runs from its earliest task start to its latest task end, "4 of 5 done" is counted from its tasks, its bar is that count as a share, and its glyph and word (Complete, In progress, Not started) follow from the same list. The header says the whole plan's span in days and has one control, Expand all, which becomes Collapse all once every phase is open. A polite status line names what opened. For project plans, release trains and any hierarchy where a parent should be nothing but the sum of its parts. The plan is example data.
FAQ
How do I change the plan?
Edit PHASES at the top of the file. A phase has an id, a title and a list of tasks; a task has an id, a title, a start and an end day and a kind, which is one of DONE, DOING and TODO. Everything a phase shows (its dates, its count, its bar, its glyph and its word) and the dates in the header are derived from the tasks, so editing a task moves them all.
How is a phase's status decided?
It is Complete when every task is done, In progress when any task has started and Not started otherwise. The rail segment under a phase is solid when the phase is complete and dashed when it is not. Each task has the same rule on its own smaller rail.
What does Expand all do?
It opens every phase at once so the whole plan reads as one list, and the button then reads Collapse all. The open phases are held in one list of ids, so opening or closing a single phase keeps the others as they were. Closed phases take no room, so the panel is as tall as what is open.
What stays in the page?
Which phases are open. The tasks are fixed example data and nothing is saved. To make the statuses editable, give each task a status control (see the status indicators timeline) and keep the derived values as they are: they will follow.
Is it accessible?
The phases are an ordered list with a heading each, the heading holds a button that opens the phase, and the open state is exposed to assistive technology. Tasks are an ordered list under a smaller heading, and every status is a word as well as a glyph. The status line is a polite live region that is there from load.