Stepper
A horizontal multi-step progress indicator with connectors.
Usage
Installation
Stepper comes with WunderUI Core and Pro, in the package from your plan. See the plans.
Then 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.
Numbered instructions
Numbered steps with an explanation each — for setup guides.
Vertical with connector
Four numbered steps joined by a line.
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.