Timeline
A vertical list of events joined by a connector line, each with a node on the rail — an icon, avatar or dot — and content beside it. The building block for activity feeds, audit logs and status histories; the connector stops automatically at the final node.
$
Registry itembunx shadcn@latest add @nx-ui/timelineInstalls withutils
With icon nodes
Each event carries a coloured featured-icon node. The rail line runs from below one node down to the next, and is suppressed on the last item.
- Batch #0412 approvedAda Okonkwo · 2 hours ago
- Round RD-2231 dispatchedSystem · 3 hours ago
- Intake rejected at Wyke CommonMarcus Bell · yesterday
With avatars and an attached card
Actor avatars lead each row, and an event can carry an attached card — a comment body, a diff, or a quoted note.
- AOAda Okonkwo left a note1 hour agoMoisture is trending high on the last two intakes — worth a spot check before Friday's run.
- Contamination report filedVerdant Labs · yesterday
Plain dot nodes
Without a custom node, TimelineNode renders a neutral dot — enough to anchor a lightweight status history.
- Order placed09:14
- Collection scheduled11:02
- Delivered to site16:47
API reference
Exported parts and their props, extracted from the component source.