Status Timeline
Show the progress of an incident or task with completed and upcoming steps connected by a line.
- Dependencies
- No extra packages
- Size
- 144 lines
- Controls
- 6 controls
Installation
CLI · shadcn registry
npx shadcn@latest add https://ui.onycx.dev/r/status-timeline.json1 · Dependencies
None beyond React and Tailwind.
2 · Copy the source
components/onycx/status-timeline.tsx
Requires React 19 and Tailwind CSS v4. Copy the source from the status-timeline.tsx tab after tweaking: your values are baked in as the new defaults. Exported image examples use portable sample artwork. Replace it with your own media as needed.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| steps | TimelineStep[] | — | { title, detail? }. Defaults to the four incident stages. |
| current | number | 1 | Index of the latest reached step; it and every earlier step are complete. |
| allComplete | boolean | false | Every step complete, like the incident's closed state. |
| title | string | "Status timeline" | Card title; an empty string hides the header. |
| safe / safeInk | string | "#34D399" / "#06281C" | Completed fill, rails and card tint (14% bubble, 32% border), and the check on filled dots. |
| card | boolean | true | Wrap in the info card; false renders the bare list. |