KQ-230 · VIGNETTE/APP/WINDOW
App Window Vignette
A product window that paints itself in: the chrome lands first, sidebar rows cascade, the spark line draws its series, and the headline number rolls up on the readout — the standard product-demo vignette for a hero that wants to show software working without shipping a screenshot. Purely presentational: the scene reads to assistive tech as one image with an honest label.
KQ-230 · VIGNETTE/APP/WINDOW
Install
One command — the source lands in your repo. Or copy it from the Code tab.
$ pnpm dlx shadcn@latest add @kinetiq/vignette-app-window
Props
- rows
- WindowRow[]
- default —
- Sidebar rows that cascade in; the first reads active.
- metric
- { label, value, suffix }
- default —
- The headline number the readout rolls to.
- series / seriesLabel
- number[] · string
- default —
- The line the spark instrument draws.
| Prop | Type | Default | Description |
|---|---|---|---|
| rows | WindowRow[] | — | Sidebar rows that cascade in; the first reads active. |
| metric | { label, value, suffix } | — | The headline number the readout rolls to. |
| series / seriesLabel | number[] · string | — | The line the spark instrument draws. |