KB-329 · HOW/CARD/DECK
Card Deck How-It-Works
A process as a row of full cards that runs past the viewport edge, and as the reader advances each passed card is pulled into a layered stack at the left while the next takes focus. The row visibly shortens as the stack grows, which is the device: the reader can see how much is done and how much is waiting, and every passed step stays reachable in the stack.
Install
One command — the source lands in your repo. Or copy it from the Code tab.
$ pnpm dlx shadcn@latest add @kinetiq/how-card-deck
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| steps | DeckStep[] | — | Title, note, and the artifact each step leaves behind. |
| defaultIndex | number | — | The step in focus on first paint. |
| eyebrow / headline / deck | string | — | The standfirst above the deck. |