Shadcn Timeline Pipeline Steps

When to use

• Project milestones, product roadmaps and release histories, stacked or laid out in a row
• Activity feeds and logs such as git events, deploy runs and team member actions
• Progress through ordered stages, such as order shipping or a build pipeline

When not to use

• A history of finished deploys, each a pass or fail with commit and branch: use the Timeline Deployment Log example
• A ready made activity feed, approval tracker or changelog to drop into a page: use the Timeline blocks
• A full page audit log of access events grouped by day, with filters and export: use the Users blocks
• A multi step form or setup flow the user clicks through, one panel at a time: use the Stepper component

Agent notes

• Node icons and badge colors follow each step's status, but the node fill follows defaultValue; set both from the same pipeline state
• onValueChange never fires, since no part changes the step on click or key; progress moves only when you pass a new value
• defaultValue is 1 when omitted, which sets data-completed on the TimelineItem with step 1; pass 0 when nothing is done yet
• Keep each TimelineItem a direct child of Timeline; wrapping one in an element hides its TimelineSeparator as if it were the last item