bloxa

Stepper

FREE

Horizontal or vertical multi-step progress with filling connectors, errors and optional steps.

Installation

Terminal
npx @bloxa/cli add stepper
# or: npx shadcn@latest add @bloxa/stepper

Packages installed automatically: motion

Examples

Checkout steps

Click a completed step to go back.

  1. Cart3 items
  2. 2
    AddressWhere to ship
  3. 3
    Gift noteOptional
  4. 4
    Payment

Vertical with an error

  1. Create accountDone in 30 seconds
  2. Verify emailCode sent to [email protected]
  3. !
    Connect domainDNS check failed
  4. 4
    Invite team

API reference

Every component also accepts the props of the element it renders.

Stepper

PropTypeDefaultDescription
steps{ title, description?, icon?, error?, optional? }[]—Steps.
currentnumber—Current step (from 0).
orientation"horizontal" | "vertical""horizontal"Direction.
onStepClick(index) => void—Jump back to completed steps.
size"sm" | "md""md"Size.