# Shadcn Numbered Chevrons

> Stepper with numbered chevron stages

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

## Best for

Clip path chevrons that nest notch into arrow, outlined by a drop shadow on focus because the clip hides the ring

## When not to use

- A deal board where every stage column holds many cards that move: use [Kanban](https://reui.io/components/kanban.md) (`get_component("kanban")`)

## Install

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

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