KQ-568 · STEP/SLIDE
Step Slide
A wizard whose frame fits the step it is showing. Next takes the current panel out to the left on the exit ease while the next arrives from a shift to the right on snap, Back reverses both, and the frame's height glides to the panel's measured height rather than reserving room for the tallest one. The dots fill in order and the current one stretches into a pill on snap; Back and Next are ordinary buttons and every move is announced politely.
KQ-568 · STEP/SLIDE
Step 1 of 3
Workspace
Step Workspace
Install
One command — the source lands in your repo. Or copy it from the Code tab.
$ pnpm dlx shadcn@latest add @kinetiq/step-slide
Props
- steps
- { id: string; title: string; content: React.ReactNode }[]
- default —
- Ordered steps. Each renders as a group panel titled by its own heading.
- value / defaultValue
- number
- default 0
- Controlled or initial step index, clamped to the range.
- onValueChange
- (index: number) => void
- default —
- Fires on every move, forwards or back.
- onFinish
- () => void
- default —
- Fires when the forward button is pressed on the last step.
- finishLabel
- string
- default "Finish"
- Label the forward button takes on the last step.
| Prop | Type | Default | Description |
|---|---|---|---|
| steps | { id: string; title: string; content: React.ReactNode }[] | — | Ordered steps. Each renders as a group panel titled by its own heading. |
| value / defaultValue | number | 0 | Controlled or initial step index, clamped to the range. |
| onValueChange | (index: number) => void | — | Fires on every move, forwards or back. |
| onFinish | () => void | — | Fires when the forward button is pressed on the last step. |
| finishLabel | string | "Finish" | Label the forward button takes on the last step. |