Stepper

In the app

The wizard bar across the top of a build flow. Done steps get a check, the current one a navy number, the rest wait in the low grey.

@varick/ui/components/stepperAdded 2 Sept 2026

Pick a template
2Connect systems
3Set guardrails
4Test run

Step 2 of 4

Connect the systems this agent reads from and writes to.

Usage

import { Stepper } from "@varick/ui/components/stepper";

export function Example() {
  return <Stepper steps={STEPS} current={step} meta={`Step ${step + 1} of ${STEPS.length}`} />;
}

API reference

Every component also accepts className and the native props of its root element.

Prop	Type	Default	Description
steps	string[]	required	Step names, in order.
current	number	required	Zero-based index of the active step. Earlier steps render as done.
meta	string	undefined	Right-aligned caption.

Accessibility

An ordered list; the active step carries aria-current="step". Done steps show a check as well as the grey.

Styles

The CSS as it appears in the app. The live component above is the same values as Tailwind classes.

.stepper-bar { display: flex; align-items: center; gap: 10px; padding: 11px 20px; border-bottom: 1px solid var(--hairline-soft); background: var(--fill-soft); }
.step { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--fg-low); }
.step.on { color: var(--fg-high); font-weight: 500; }
.step-n { width: 18px; height: 18px; border: 1px solid var(--hairline-soft); border-radius: 4px; font-size: 10.5px; display: grid; place-items: center; }
.step.on .step-n { background: var(--canvas); border-color: var(--canvas); color: #FFFFFF; }
.stepper-meta { margin-left: auto; font-size: 12.5px; color: var(--fg-mid); }