# Shadcn Purchase Orders

> Stepper with purchase order checks

- Type: example, free and open source (MIT)
- Component: [Stepper](https://reui.io/components/stepper.md)
- Page: https://reui.io/components/stepper/c-stepper-20
- Docs (Base UI): https://reui.io/docs/components/base/stepper.md
- Docs (Radix UI): https://reui.io/docs/components/radix/stepper.md
- MCP: `get_example("c-stepper-20")`
- Registry item: https://reui.io/r/styles/base-nova/c-stepper-20.json
- Uses: Badge, Button, Dropdown Menu, Separator, Tree

## Best for

A Tree of orders with Ready or Review badges and an actions menu on the active step row, also opened by Shift+F10

## Agent notes

- Built on the `Tree` primitive with `useTree` from `@headless-tree/react`, so it renders no Stepper parts at all
- The `DropdownMenuItem` actions Re-run step, Assign reviewer and Add comment have no handlers yet
- Swap `orders` for your data; badges and step states are derived from each order's `checks`

## When not to use

- A plain folder outline with no pass, fail or pending result per row: use [Tree](https://reui.io/components/tree.md) (`get_component("tree")`)

## Install

```bash
npx shadcn@latest add @reui/c-stepper-20
```

## About Shadcn Stepper

### When to use

- Forms and setup flows split into numbered steps that people move back and forth through
- Shipment, delivery and freight tracking shown as stops with times, ETAs and the leg underway
- Incident, ticket, sales, proposal and review workflows laid out as stages, cards, rows or nested tasks

### When not to use

- A finished screen that runs a billing, invoice or vendor task through numbered steps: use the [Wizard blocks](https://reui.io/blocks/application/wizard.md)
- A complete first run account setup shown right after signup, with invites and goals: use the [Onboarding blocks](https://reui.io/blocks/application/onboarding.md)
- A storefront purchase that takes shipping and card details beside the cart total: use the [Checkout blocks](https://reui.io/blocks/ecommerce/checkout.md)

### Agent notes

- `StepperTrigger` takes another element through `render` on the base twin and `asChild` on the radix twin
- Trigger ids come from `step` alone, so 2 steppers on one page need their own `id` and `aria-controls` on each `StepperTrigger`
- `StepperContent` unmounts every inactive step, so keep field values in parent state or pass `forceMount`

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.