# Stepper

> Horizontal or vertical steps with animated progress and back-navigation.

Component · Free · https://lodeui.com/components/stepper

## When to use

- Multi-step forms: checkout, onboarding, setup wizards.

## When not to use

- Tasks people can do in any order: use a checklist.

## Installation

```bash
npx shadcn@latest add https://lodeui.com/r/stepper.json
```

npm dependencies: motion, lucide-react

## Usage

```tsx title="example.tsx"
import { Stepper } from "@/components/ui/stepper";

export function Checkout({ step, setStep }: { step: number; setStep: (n: number) => void }) {
  return <Stepper current={step} onStepClick={setStep} steps={[{ title: "Cart" }, { title: "Shipping" }, { title: "Payment" }]} />;
}
```

## API reference

### Stepper

Numbered steps with done, current and upcoming states.

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| steps | `{ title; description? }[]` | – | The steps. |
| current | `number` | – | Zero-based index of the current step. |
| orientation | `"horizontal" \| "vertical"` | `"horizontal"` | Layout. |
| onStepClick | `(index: number) => void` | – | Lets people go back to finished steps. |

## Keyboard interactions

| Keys | Action |
| --- | --- |
| Tab | Move between finished steps (when clickable) |
| Enter | Go back to that step |

## Accessibility

- An ordered list; the current step has aria-current="step".

## Motion

- Connectors fill and check marks pop as steps complete.

## Responsive behavior

- Use vertical on phones when titles are long.

## Performance

- Static apart from the connector fill.

## Notes for AI

- current is zero-based.

## Related

- [Progress](https://lodeui.com/components/progress) — Linear bar, ring and segmented meter, all spring-driven.
- [Radio group](https://lodeui.com/components/radio-group) — Radios as a list or as choice cards, with arrow-key navigation.