# Steps

Steps is a neobrutalist React component from Cruise UI. A numbered stepper: horizontal on desktop, vertical on phones.

Install (with the @cruiseui registry in components.json, see Installation):

```bash
npx shadcn@latest add @cruiseui/steps
```

Import: `import { CruiseSteps } from "@/components/cruise/steps";`

## When to use

A task split into 3–5 steps in a fixed order: checkout, sign-up, publishing.

## When not to

Steps people can do in any order (use Tabs or a checklist).

## Example (React)

```tsx
"use client";

import { useState } from "react";
import { CruiseSteps } from "@/components/cruise/steps";

export default function StepsExample() {
  const [current, setCurrent] = useState(2);
  return (
    <CruiseSteps
      label="Checkout progress"
      current={current}
      onStepClick={setCurrent}
      steps={[{ label: "Cart", hint: "2 items" }, { label: "Delivery" }, { label: "Payment" }, { label: "Done" }]}
    />
  );
}
```

## HTML

Needs theme.css (https://cruiseui.dev/theme.css).

```html
<ol class="steps" aria-label="Checkout progress">
  <li class="step" data-state="done">
    <a class="step-box" href="#cart" aria-label="Back to step 1: Cart">
      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" aria-hidden="true"><path d="M20 6 9 17l-5-5"/></svg></a>
    <span class="step-text"><span class="step-label">Cart<span class="visually-hidden"> (done)</span></span><span class="step-hint">2 items</span></span>
  </li>
  <li class="step" data-state="current" aria-current="step">
    <span class="step-box on-primary" aria-hidden="true">2</span>
    <span class="step-text"><span class="step-label">Delivery<span class="visually-hidden"> (current step)</span></span></span>
  </li>
  <li class="step" data-state="upcoming">
    <span class="step-box" aria-hidden="true">3</span>
    <span class="step-text"><span class="step-label">Payment</span></span>
  </li>
</ol>
```

## Props: CruiseSteps

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `steps` | `CruiseStep[]` | — | — |
| `current` | `number` | — | Index of the current step (0-based). |
| `label?` | `string` | `"Progress"` | Accessible name for the list, e.g. "Checkout progress". |
| `onStepClick?` | `((index: number) => void)` | — | — |
| `className?` | `string` | — | — |

## Accessibility

- An <ol>; the current step has aria-current="step".
- Each state is also in words for screen readers (done, current step).