# Shadcn Order Status

> Timeline with order status.

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

## Best for

Order stages where every step up to the current one fills its node with a check and later steps stay an empty ring

## Agent notes

- `orderStatus` has no state field: the checks come from `defaultValue`, so pass the `id` of the order's current stage there

## Install

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

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