shadcn.io is not affiliated with official shadcn/ui
Status Indicators Timeline Block for React Aria
Eight conference production tasks on a rail where a small select under each task sets its status, the glyph on the node and the line behind it follow, and a four-cell legend counts the statuses with an Undo for the last change.
Installation
Overview
Let the person say how far each task has got, and let the line show it, with this status indicators timeline for React with React Aria. It is written for Runsheet, a fictional conference production planner. A hairline frame with a plus mark on each corner holds a four-cell legend over a vertical rail of eight tasks. Under each task title is a small native select with four statuses, and the node follows it with a glyph and a shape: a ring for Not started, a dotted circle for In progress, a square with a cross for Blocked and a filled check for Done. The segment under a node is solid once its task is Done and dashed otherwise. The legend counts the tasks in each status, worked out from the rows. The foot says the last move in words ("Moved 'Print badges' to Blocked.") and has an Undo that puts the task back and returns focus to its select. For production runsheets, launch checklists and any list where the state of each step is the story. The tasks are example data.
FAQ
How do I change the tasks?
Edit TASKS at the top of the file. Each has an id, a title, a note, a fixed due day and the start status, one of todo, doing, blocked and done. The statuses themselves are TODO, DOING, BLOCKED and DONE: each pairs a word, an icon and a tile style. The legend counts are derived from the current statuses.
Is the status only shown by colour?
No. Every status has its own shape and its own word. The select shows the word, the node carries the glyph, and the tiles differ in outline and fill, not in hue. The legend repeats glyph, count and word.
What does the line between tasks mean?
The segment under a node is solid when that task is Done and dashed when it is not, so the solid part of the rail reaches as far as the finished work. Changing a status redraws the segment at once.
What stays in the page?
The statuses and the last move for Undo. Nothing is saved. To wire it for real, send the change to your server from pick, and keep the previous status so Undo can send it back.