# Shadcn Right-Aligned Sub-Steps

> Stepper with right-aligned sub-steps

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

## Best for

End aligned labels on a segmented rail with a nested task rail, and status announced through useStepItem

## Agent notes

- `selectPhase` ignores the current phase, so choosing it again never resets the task in progress

## When not to use

- A bordered box around the open phase that folds when chosen again: use [Collapsible Sub-Steps](https://reui.io/components/stepper/c-stepper-43.md) (`get_example("c-stepper-43")`)

## Install

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

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