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
- tiles
- { id: string; content: ReactNode }[]
- default —
- The tiles in their initial order; identity drives the FLIP.
- columns
- number
- default 3
- Grid column count.
- onOrderChange
- (ids: string[]) => void
- default —
- Fires with the new id order after a drop or keyboard move.
- aria-label
- string
- default —
- Names the reorderable list.
| 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. |