# Stepper

> Where someone is in a flow of a few steps: onboarding, a setup, an import. An ordered list; the current step is marked for screen readers and takes the ◆, done steps a check, a step that needs attention a warning, and each step's state is read in words. The line to the next step fills when one is done. Below 640px a horizontal stepper keeps only the current label in view. Server safe.

Section: Primitives. Docs: https://entrepta.vercel.app/docs/components/stepper

## Install

```bash
npx @entrepta/cli@latest add stepper
```

Files: `primitives/stepper.tsx`, `content/diamond.tsx`.
npm packages: `@phosphor-icons/react`.
Comes with: `diamond`.

## Usage

```tsx
import { Stepper } from "@/components/entrepta/stepper"

<Stepper
  steps={[
    { id: "account", label: "Account" },
    { id: "bank", label: "Connect a bank", description: "Read only" },
    { id: "budget", label: "First budget" },
  ]}
  current="bank"
/>
```

## Props

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `steps` | `{ id, label, description? }[]` | - | In order |
| `current` | `string` | - | The id of the step in progress |
| `completed` | `string[]` | every step before current | The ids of the steps done |
| `errored` | `string[]` | - | Steps that need attention; wins over completed |
| `orientation` | `"horizontal" \| "vertical"` | "horizontal" | A row, or a column with every label |
| `labels` | `{ complete?, current?, error?, upcoming? }` | - | The state words |