Steps
Steps is a neobrutalist React component from Cruise UI. A numbered stepper: horizontal on desktop, vertical on phones. Install it with npx shadcn@latest add @cruiseui/steps.
Install
Terminal
npx shadcn@latest add @cruiseui/stepsFirst time? Installation shows the one-off components.json setup (the @cruiseui registry) and how to turn the theme on.
Example
Corners
- Cart (done)2 items
- Delivery (done)
- Payment (current step)
- Done
"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" }]}
/>
);
}
<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>Needs theme.css. Interactive parts (menus, tabs, drawers) also need the script in the spec for that component.
When to use it
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).
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).