Maple · Navigation

Stepper

Progress through a multi-step flow such as onboarding or checkout. Completed steps show a check, the current step has an accent ring, upcoming steps are muted.

View in Storybook →

Horizontal

  1. AccountYour details
  2. 2WorkspaceName your team
  3. 3InviteAdd people
  4. 4DoneStart building
<Stepper steps={steps} current={1} />

Vertical

  1. AccountYour details
  2. WorkspaceName your team
  3. 3InviteAdd people
  4. 4Done

Props

PropTypeDefaultDescription
steps{ title, description? }[]—Steps.
currentnumber—Index of the current step.
orientation"horizontal" | "vertical""horizontal"Layout.