Stepper

Shows progress through ordered steps. 1px connectors; done fills with ink, active is outlined.

Preview

1Brief

2Design

3Build

In action

Job

Issue 03

The job is in design. Brief is behind. Build is next.

1Brief

2Design

3Build

When to use

Use it for

A fixed sequence of three to six steps where the user should see what is done and what is next.
sub for a short status under a step.

Not for

Steps the user can jump between; use Tabs.
Progress of one task; use Progress.

Install

Three ways in. They share one source, so the pixels match whichever you pick.

1. Import the package

npm install @noorddev/vlak-react

// once, next to your app's root
import "@noorddev/vlak-react/css";

import { Stepper } from "@noorddev/vlak-react";

Precompiled React and one stylesheet. No compiler to configure. Per-component imports work too: @noorddev/vlak-react/components/stepper.

2. Vendor the source

npx @noorddev/vlak-cli add stepper

The StyleX leaf lands in components/vlak/, for your own compiler to own. See StyleX.

3. Through shadcn

npx shadcn add https://vlak.dev/r/stepper.json

The same registry item, installed by shadcn's CLI.

CSS only

<link rel="stylesheet" href="node_modules/@noorddev/vlak/css/vlak.css" />

No React. Link vlak.css and use the markup and classes below.

React

import { Stepper } from "@noorddev/vlak-react";

<Stepper steps={[{ name: "Brief" }, { name: "Design", sub: "In review" }, { name: "Build" }]} current={1} />

Props

Stepper

Prop	Type	Default	Description
`steps`required	`Step[]`
`current`required	`number`		0-based index of the active step; everything before it is done.

Also accepts HTMLAttributes<HTMLDivElement>.

Accessibility

The active step carries aria-current="step"; connector lines are aria-hidden.
The dots are numbered text, so the order reads without color.

Markup

<div class="rs-steps"><div class="rs-step"><span class="rs-step-dot rs-step-done">1</span><span class="rs-step-line"></span><span class="rs-step-name">Brief</span></div><div class="rs-step"><span class="rs-step-dot rs-step-active">2</span><span class="rs-step-name">Design</span></div></div>

Classes

.rs-steps.rs-step.rs-step-dot.rs-step-done.rs-step-active.rs-step-name.rs-step-sub.rs-step-line