KQ-826 · GENERATE/PROGRESS
Generate Progress
Stages, not a spinner. A vertical rail with one node per stage of a generation; as the host reaches a stage its name slides in beside the node from eight pixels away on snap and its note fades in underneath, the fill between nodes grows on glide to the stage's fraction, a landed node draws its tick on flick, and the header's counter rolls its digit on snap beside a word that says Waiting, Working, or Done. The header is the progressbar and the rail is a list with aria-current on the stage in flight; nothing is focusable because it is read, not driven.
KQ-826 · GENERATE/PROGRESS
Shift brief · Fernworks Model 3
- Understanding, not started
- Drafting, not started
- Refining, not started
Press generate · 3 stages
Install
One command — the source lands in your repo. Or copy it from the Code tab.
$ pnpm dlx shadcn@latest add @kinetiq/generate-progress
Props
- stages
- GenerateStage[]
- default —
- Ordered stages: id, label, and an optional note shown under the name once the stage has begun.
- stage
- number
- default —
- Index of the stage in flight; below 0 is waiting and stages.length means every stage has landed.
- progress
- number
- default 0
- 0..1 inside the current stage, driven by the host.
- label
- string
- default —
- Names the progressbar for assistive technology.
- doneLabel
- string
- default "Done"
- The header word once every stage has landed.
| Prop | Type | Default | Description |
|---|---|---|---|
| stages | GenerateStage[] | — | Ordered stages: id, label, and an optional note shown under the name once the stage has begun. |
| stage | number | — | Index of the stage in flight; below 0 is waiting and stages.length means every stage has landed. |
| progress | number | 0 | 0..1 inside the current stage, driven by the host. |
| label | string | — | Names the progressbar for assistive technology. |
| doneLabel | string | "Done" | The header word once every stage has landed. |