Kinetiq

KQ-201 · STEPPER/FLOW

Stepper Flow

A wizard stepper. As the active step advances, the connector into each cleared step fills and its node stamps a check on a springy landing; the current node holds a ring and any earlier node can be clicked to step back.

KQ-201 · STEPPER/FLOW
  1. Account
  2. Profile
  3. Review
  4. Done

Step 2 of 4

Install

One command — the source lands in your repo. Or copy it from the Code tab.

$ pnpm dlx shadcn@latest add @kinetiq/stepper-flow

Props

PropTypeDefaultDescription
stepsStep[]—The steps — id, label, optional description.
currentnumber—Active step index; steps before it read as complete.
onStepChange(index) => void—Fires when a completed or current step is clicked.