# Shadcn Compact Milestones

> Compact horizontal milestone timeline

- Type: example, free and open source (MIT)
- Component: [Timeline](https://reui.io/components/timeline.md)
- Page: https://reui.io/components/timeline/c-timeline-12
- 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-12")`
- Registry item: https://reui.io/r/styles/base-nova/c-timeline-12.json
- Uses: Badge, Timeline

## Best for

Versions across a row with check, play or circle nodes by status and a Current badge on the version in progress

## Agent notes

- Node look and the Current badge follow `status` in `releases`, set to released, current or upcoming; `defaultValue` changes nothing visible

## Install

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

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