# Shadcn Shipping Route

> Stepper with shipping route and stop details

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

## Best for

A container query route that sheds rows as it narrows, a skewed segment bar on one leg and an arrow past the last port

## Agent notes

- The sailed share in `wave` is fixed at 75%; compute it from the real distance of the active leg
- The captain photo is an Unsplash URL in `avatar`; replace it with an image you serve

## When not to use

- A truck run with rest breaks and a vehicle badge on the moving leg: use [Truck Route](https://reui.io/components/stepper/c-stepper-30.md) (`get_example("c-stepper-30")`)

## Install

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

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