Draggable Grid
A draggable 2D grid with parallax icon cells. Inspired by Apple WatchOS.
Loading...
Install
Use Open-UI CLI or Shadcn CLI to install the component.
Open-UI CLI
Shadcn CLI
Usage
| Item | Prop | Default | Description | Type |
|---|---|---|---|---|
| Root | children | — | Root/Grid: child nodes. Item: custom content; when provided, item (link+image+tooltip) is ignored. | ReactNode |
| Root | className | — | Optional CSS class for the container. | string |
| Root | iconSize | 120 | Size (px) of each grid cell/icon. Used for layout and parallax. | number |
| Root | iconMargin | 40 | Gap (px) between grid cells. | number |
| Root | rows | 10 | Number of grid rows (Root). | number |
| Root | cols | 10 | Number of grid columns (Root). | number |
| Root | linkComponent | — | Custom component for links (e.g. Next.js Link). Receives href and children. | ComponentType<{ href; children }> |
| Root | fallback | — | ReactNode shown before mount (e.g. loading). If set, Root renders it instead of default loading UI. | ReactNode |
| Grid | children | — | Root/Grid: child nodes. Item: custom content; when provided, item (link+image+tooltip) is ignored. | ReactNode |
| Grid | className | — | Optional CSS class for the container. | string |
| Grid | dragConstraints | — | Bounds for dragging: { left, right, top, bottom } in px. Limits how far the grid plane can be dragged. | { left, right, top, bottom } |
| Item | row | — | Item's row index in the grid (0-based). | number |
| Item | col | — | Item's column index in the grid (0-based). | number |
| Item | index | — | Item order for stagger animation delay. | number |
| Item | item | — | Data for default cell: { id, href?, image?, label? }. When set, renders link + image/tooltip; omit and use children for custom content. | DraggableGridItemBase |
| Item | linkComponent | — | Custom component for links (e.g. Next.js Link). Receives href and children. | ComponentType<{ href; children }> |
| Item | className | — | Optional CSS class for the container. | string |
| Item | children | — | Root/Grid: child nodes. Item: custom content; when provided, item (link+image+tooltip) is ignored. | ReactNode |