# Steps

> Where you are in a flow: the line to the next step fills along its length, the finished number blurs into a drawn check, and phones get "Step 2 of 4".

Steppers usually swap a number for a check and colour the next line in one frame. Here the line to the next step fills along its length, the finished step's number blurs into a check that draws itself, and the new current step's ring pops in. Going back drains the line. In a small container it becomes one line, "Step 2 of 4 · Payment", with a filling bar.

## Install

```bash
npx shadcn@latest add https://hairlineui.com/r/steps.json
```

Needs React 19, Tailwind CSS v4 and shadcn/ui theme variables (any style, light and dark). Icons from lucide-react.

- npm: none
- Hairline UI components it needs (the CLI installs them too): `number-roll`, `text-morph`, `ui-interaction-motion`
- Docs and live preview: https://hairlineui.com/ui/steps
- Registry item (source): https://hairlineui.com/r/steps.json

## Usage

```tsx
import { Steps } from "@/components/ui/steps";

<Steps current={1} steps={[{ label: "Cart" }, { label: "Details" }, { label: "Payment" }, { label: "Done" }]} />
```

## Props

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `steps` | `Step[]` | – | label and description. |
| `current` | `number` | – | Index of the current step; steps.length means all done. |
| `onStepClick` | `(index) => void` | – | Let people go back to finished steps. |
| `orientation` | `"horizontal" \| "vertical"` | `"horizontal"` | Direction. |

## States

- **advance**: The line fills (520ms); the number blurs into a check (360ms draw); the next ring pops in.
- **back**: The line drains with a slight overshoot; the number returns.
- **narrow**: Step number rolls; the name morphs.

## What it handles

A stepper should make progress feel like progress; a line that fills and a check that draws do that.

- **Filling lines**: scaleX from the left, 520ms.
- **Drawn checks**: The number blurs out as the check draws.
- **Back to finished steps**: onStepClick makes done steps buttons.
- **Container aware**: Below 30rem: "Step 2 of 4" with a rolling number and a bar.

## Replaces

stepper, progress steps, wizard header

## Where it fits

- **Checkout**: Cart, Details, Payment, Done.
- **Onboarding**: Create workspace, invite team, connect data.
- **Long forms**: Sections of an application.
- **Order tracking**: A vertical list of what has happened.

## Notes

- The current step has aria-current="step".
- Reduced motion: lines and checks change at once.

License: MIT (https://hairlineui.com/license#components)