Stepper
A horizontal multi-step progress indicator with connectors.
Usage
Installation
npm install @wunderui/reactThen import what you need:
import { Stepper, StepperProps, StepperStep } from "@wunderui/react"Examples
Three steps
Across the top of a short wizard — click a step to jump to it.
Vertical with details
Down the side of a longer setup, a line of detail under each step.
- Your profileTell us a bit about yourself
- WorkspaceSet up your team's workspace
- Invite teamBring your teammates on board
- Choose planStart free, upgrade anytime
- Import dataBring over your projects
Numbered instructions
Numbered steps with an explanation each — for setup guides.
- Install an authenticator appGoogle Authenticator, 1Password, Authy or Microsoft Authenticator.
- Scan the QR codeOr enter the setup key manually if you can't scan.
- Enter the 6-digit codeType the code shown in your app below to finish setup.
Vertical with connector
Four numbered steps joined by a line.
- Your profileTell us a bit about yourself
- WorkspaceSet up your team's workspace
- Invite teamBring your teammates on board
- Choose planStart free, upgrade anytime
Four steps
Numbered steps with their labels below.
Done · 24 px
A completed step at the smallest size.
Done · 28 px
A completed step at the medium size.
Done · 32 px
A completed step at the largest size.
In context
How the component is used inside real screens — the same compositions as the Usage section of the Figma page.
Multi-step sign-up card
A sign-up split into short steps: Continue moves forward, a finished step in the header takes you back.
Multi-step sign-up card (step 2)
The same card, opened on the workspace step.
Import data stepper panel
A vertical stepper as the sidebar of a longer setup — jump to any step on the left, the form on the right follows.
- AccountEmail and password
- WorkspaceName and URL
- TeamInvite people
- PlanPick a plan
- ImportBring your data