CleenUI · Navigation · Stepper

Stepper

Numbered step indicator for multi-step flows — connects to Wizard or works standalone.

storybook.cleenui.com · navigation-stepper--horizontal
Open in new window

About Stepper

Stepper shows a numbered or labeled sequence of steps with the current position highlighted. Pair it with Wizard for state, or use it standalone to display a sequence of phases the user has completed or has yet to complete.

Horizontal and vertical orientations are supported. Each step can be clickable (to jump back) or display-only. Step-completion states (done, current, pending, error) drive the visual variant per step.

When to use it

  • Multi-step form headers (paired with Wizard).
  • Checkout flow progress indicators.
  • Onboarding sequence visualizations.
  • Approval workflow status displays.

Common props

Prop
Type
Description
steps
Step[]
Step definitions {key, label, status}.
currentIndex
number
Currently active step index.
orientation
"horizontal" | "vertical"
Stepper direction.
onStepClick
(step) => void
Make steps clickable when set.
size
"sm" | "md" | "lg"
Visual size variant.
⚡ Already in an AI editor?

Set up CleenUI in your tool.

Skip the manual import — ask your AI agent to build with this component. The Builder skill knows its props, variants, and idioms.

Live demo

See CleenUI running before you talk to us.

Configure a demo environment in about twenty seconds — theme, spacing, the modules you care about, sample data for your industry — then launch the full dashboard in your browser. Nothing to install, no signup.

  • 20 sec setup
  • 15 themes
  • 20 modules
  • 80 industries
Pick a theme to start with