navigation · Normal DOM only

Stepper

Numbered step progression — horizontal for onboarding wizards, vertical for progress logs.

Use Stepper for any multi-step workflow where the user needs to see where they are and how much is left. For background progress without user interaction use Progress.

Install

Pull from the workspace packages (already available if you ran pnpm add):

ts
import { Stepper } from '@8maverik8/twenty-design';

Examples

Horizontal wizard

Account
Sign up
Workspace
Pick a name
3
Connect
Link Gmail / Calendar
4
Invite team (optional)
5
Done
tsx
<Stepper current={step} onStepClick={setStep} steps={[…]} />

Vertical log

Validate input
Schema OK
Run logic function
Executed in 124 ms
3
Update record
Running…
4
Send webhook
Queued
tsx
<Stepper orientation="vertical" current={2} steps={[…]} />

Guidelines

✓
Mark optional steps explicitly.Users skip optional steps without anxiety when they're labelled.
✕
Use Stepper for >6 steps.Long step bars stop reading as progress — they look like static badges.