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

AccountCredentials
ProfileAbout you
ReviewConfirm
DoneFinished

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

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

Prop	Type	Default	Description
steps	Step[]	—	The steps — id, label, optional description.
current	number	—	Active step index; steps before it read as complete.
onStepChange	(index) => void	—	Fires when a completed or current step is clicked.