KQ-163 · SWATCH/LOCK
Swatch Lock
A grid of colour swatches where the pick locks in: a ring draws itself around the chosen chip while the rest ease back to let it stand alone. Locking is the whole affordance — you can see what is held without reading anything.
KQ-163 · SWATCH/LOCK
Housing finish
Locked Cobalt
Install
One command — the source lands in your repo. Or copy it from the Code tab.
$ pnpm dlx shadcn@latest add @kinetiq/swatch-lock
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| swatches | Swatch[] | — | Each carries an id, a label, and any CSS colour. |
| value / defaultValue | string | — | Controlled or initial pick. |
| name | string | — | Renders a hidden native radio per swatch so forms post the pick. |
| columns | number | 5 | Grid columns; Up and Down step by exactly this many. |