# Shadcn Pipeline Steps

> Timeline with pipeline steps.

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

## Best for

Build stages with a check, spinner or circle node, a status colored duration badge and a collapsible Frame per step, open on load

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

## When not to use

- A history of finished deploys, each a pass or fail with commit and branch: use [Deployment Log](https://reui.io/components/timeline/c-timeline-10.md) (`get_example("c-timeline-10")`)

## Install

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

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