# Shadcn Outlined Chevrons

> Stepper with outlined chevron plan

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

## Best for

Full width chevrons whose traced SVG edges outline the done and current steps at low opacity, after a Plan count chip

## When not to use

- Flat chevrons with no outline, where finished steps just turn a darker gray: use [Flat Chevrons](https://reui.io/components/stepper/c-stepper-35.md) (`get_example("c-stepper-35")`)

## Install

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

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