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

PropTypeDefaultDescription
rowsWindowRow[]Sidebar rows that cascade in; the first reads active.
metric{ label, value, suffix }The headline number the readout rolls to.
series / seriesLabelnumber[] · stringThe line the spark instrument draws.