Shadcn Timeline Roadmap

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 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

• The date column is a fixed w-20 that wraps longer dates; widen it by growing the item ms-32 and the date's left offset by the same step
• 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