KQ-119 · GATE/STEPPER
Gate Stepper
A wizard where progress is distance — every remaining gate is visible ahead, receding through the current one; advancing sweeps the active gate past the camera while the line moves up a slot, and a refused gate shakes its head.
KQ-119 · GATE/STEPPER
COMMISSIONING RUN · 04KQ-119
GATE 1 OF 4
01IDENTIFY
UNITKQ-119 · GATE STEPPER
AT GATE · IDENTIFY
Pass the gates in order - CALIBRATE needs its mark first.
Install
One command — the source lands in your repo. Or copy it from the Code tab.
$ pnpm dlx shadcn@latest add @kinetiq/gate-stepper
Props
- steps
- { id, title, content }[]
- default —
- Two to five gates.
- index / defaultIndex / onIndexChange
- number / number / (index) => void
- default —
- Controlled or uncontrolled position.
- canAdvance
- (index) => boolean
- default —
- Gate check before Next; a refusal shakes and announces.
- nextLabel / backLabel / doneLabel / onComplete
- string / string / string / () => void
- default —
- Footer wording and the finish callback.
| Prop | Type | Default | Description |
|---|---|---|---|
| steps | { id, title, content }[] | — | Two to five gates. |
| index / defaultIndex / onIndexChange | number / number / (index) => void | — | Controlled or uncontrolled position. |
| canAdvance | (index) => boolean | — | Gate check before Next; a refusal shakes and announces. |
| nextLabel / backLabel / doneLabel / onComplete | string / string / string / () => void | — | Footer wording and the finish callback. |