Steps

A multi-step wizard progress indicator with horizontal and vertical orientations, clickable navigation, and status states.

Overview

Steps is a wizard progress indicator for multi-step flows like onboarding, checkout, and form wizards. It supports horizontal and vertical orientations, three visual variants, clickable step navigation, and optional titles and descriptions.

Installation

Install the component via the CLI in one command.

npx @work-rjkashyap/unified-ui add steps

pnpm dlx @work-rjkashyap/unified-ui add steps

npx @work-rjkashyap/unified-ui add steps

bunx @work-rjkashyap/unified-ui add steps

If you haven't initialized your project yet, run npx @work-rjkashyap/unified-ui init first. See the CLI docs for details.

Or install the full package

Use this approach if you prefer to install the entire design system as a dependency instead of copying individual components.

npm install @work-rjkashyap/unified-ui

pnpm add @work-rjkashyap/unified-ui

yarn add @work-rjkashyap/unified-ui

bun add @work-rjkashyap/unified-ui

Anatomy

import {
	Steps,
	Step,
} from "@work-rjkashyap/unified-ui";

Dots

{/* Default — filled indicator with check mark */}
<Steps currentStep={1} variant="default">
<Step />
<Step />
<Step />
</Steps>

{/* Outline — bordered indicator */}

<Steps currentStep={1} variant="outline">
<Step />
<Step />
<Step />
</Steps>

{/* Dots — minimal dot indicators */}

<Steps currentStep={1} variant="dots">
<Step />
<Step />
<Step />
</Steps>

{/* Default — filled indicator with check mark */}<Steps currentStep={1} variant="default"><Step /><Step /><Step /></Steps>{/* Outline — bordered indicator */}<Steps currentStep={1} variant="outline"><Step /><Step /><Step /></Steps>{/* Dots — minimal dot indicators */}<Steps currentStep={1} variant="dots"><Step /><Step /><Step /></Steps>

Clickable Steps

const [active, setActive] = useState(0);

<Steps currentStep={active} onStepClick={setActive}>
<Step />
<Step />
<Step />
<Step />
</Steps>

<div className="flex gap-2">
<button onClick={() => setActive(Math.max(0, active - 1))} disabled={active === 0}>
  Back
</button>
<button onClick={() => setActive(Math.min(3, active + 1))} disabled={active === 3}>
  Continue
</button>
</div>

const [active, setActive] = useState(0);<Steps currentStep={active} onStepClick={setActive}><Step /><Step /><Step /><Step /></Steps><div className="flex gap-2"><button onClick={() => setActive(Math.max(0, active - 1))} disabled={active === 0}>  Back</button><button onClick={() => setActive(Math.min(3, active + 1))} disabled={active === 3}>  Continue</button></div>

Prop	Type	Default	Description
`currentStep`	`number`	—	Required. The 0-based index of the currently active step.
`orientation`	`"horizontal" \| "vertical"`	`"horizontal"`	Layout orientation.
`variant`	`"default" \| "outline" \| "dots"`	`"default"`	Visual style of step indicators.
`onStepClick`	`(index: number) => void`	—	Called when a step is clicked (enables clickable wizards).
`className`	`string`	—	Additional CSS classes on the `<ol>` element.
`children`	`ReactNode`	—	Required. Must be `Step` elements.

Step

Prop	Type	Default	Description
`title`	`string`	—	Label displayed beneath/beside the indicator.
`description`	`string`	—	Optional secondary text beneath the title.
`icon`	`ReactNode`	—	Custom icon to override the default number/check indicator.
`className`	`string`	—	Additional CSS classes on the `<li>` element.

Step Status

Each Step automatically derives its visual state from the parent currentStep prop:

Status	Condition	Visual
`complete`	`index < currentStep`	Filled indicator with a check mark.
`active`	`index === currentStep`	Bordered indicator with step number.
`upcoming`	`index > currentStep`	Muted indicator with step number.

Accessibility

Steps renders as role="list" with each Step as role="listitem". The active step has aria-current="step" applied automatically.

role="list" on the Steps container and role="listitem" on each Step.
aria-current="step" applied to the currently active step.
Clickable steps render as <button> elements with descriptive aria-label.
The connector lines are aria-hidden="true".

Overview

Installation

Or install the full package

Anatomy

Examples

Basic

Completed State

Vertical Orientation

Variants

Clickable Steps

Minimal (No Labels)

Props

Steps

Step

Step Status

Accessibility

On this page