# Shadcn Milestones

> Timeline with milestones.

- Type: example, free and open source (MIT)
- Component: [Timeline](https://reui.io/components/timeline.md)
- Page: https://reui.io/components/timeline/c-timeline-5
- Docs (Base UI): https://reui.io/docs/components/base/timeline.md
- Docs (Radix UI): https://reui.io/docs/components/radix/timeline.md
- MCP: `get_example("c-timeline-5")`
- Registry item: https://reui.io/r/styles/base-nova/c-timeline-5.json
- Uses: Timeline

## Best for

Entries that alternate either side of a center line, each just a date and a title with no body copy

## When not to use

- Releases read left to right in one row, with the current one tagged: use [Compact Milestones](https://reui.io/components/timeline/c-timeline-12.md) (`get_example("c-timeline-12")`)

## Install

```bash
npx shadcn@latest add @reui/c-timeline-5
```

## About Shadcn Timeline

### 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](https://reui.io/blocks/application/timeline.md)
- A full page audit log of access events grouped by day, with filters and export: use the [Users blocks](https://reui.io/blocks/solutions/users.md)
- A multi step form or setup flow the user clicks through, one panel at a time: use [Stepper](https://reui.io/components/stepper.md) (`get_component("stepper")`)

### Agent notes

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

Every ReUI item has a twin like this one; the index is https://reui.io/llms.txt. Agents with the ReUI MCP (https://reui.io/docs/mcp) get the same guidance from the getters named above.