KQ-036 · TILE/GRID
Tile Grid
Drag a tile and the grid reflows around it — the others FLIP-glide into their new slots, with a full keyboard lift-move-drop for reordering without a mouse.
KQ-036 · TILE/GRID
Order · CPU MEM NET DISK GPU PWR
DRAG TO REORDER · SPACE TO LIFT
Install
One command — the source lands in your repo. Or copy it from the Code tab.
$ pnpm dlx shadcn@latest add @kinetiq/tile-grid
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| tiles | { id: string; content: ReactNode }[] | — | The tiles in their initial order; identity drives the FLIP. |
| columns | number | 3 | Grid column count. |
| onOrderChange | (ids: string[]) => void | — | Fires with the new id order after a drop or keyboard move. |
| aria-label | string | — | Names the reorderable list. |