Stepper

Shows progress through a multi-step flow. Connectors fill with a gradient as steps complete; completed steps can be clickable.

Import

import { Stepper } from "@igorao79/uivix";

Examples

Horizontal

Click a completed step to go back

  1. Account
    Email & password
  2. Profile
    Name and avatar
  3. Plan
    Pick a plan
  4. Done
    Start building

Vertical

  1. Account
    Email & password
  2. Profile
    Name and avatar
  3. Plan
    Pick a plan
  4. Done
    Start building

Props

PropTypeDefaultDescription
stepsStepperStep[]-{ title, description? } for each step
currentnumber-Index of the current step; earlier steps are complete
orientation"horizontal" | "vertical""horizontal"Layout direction
onStepClick(index: number) => void-Makes completed steps clickable
classNamestring-Additional CSS classes