Smart Grid Layout
Premium spatial workspace grid with best-fit repacking, live insertion preview, resize handles, responsive layout profiles, persistence, undo/redo, and optional debug overlay.
Dashboard
Analytics-style dashboard with mixed spans, editable layout, and auto-compact.
Click Edit to drag, resize, and rearrange widgets. Click Done to save and exit edit mode.
MRR
$48.2k +12.4%
Active users
2,841Last 7 days
Deployments
127 99.2% success
Revenue overview
Chart placeholder
Traffic sources
Organic
Direct
Referral
Recent activity
- Deploy #412 completed
- 3 new team members
- Alert threshold updated
Sign in to view this example's source code.
Sign inCompact displacement
Dense grid showing large widgets displacing smaller ones on drag.
Dense 3-column grid - use Edit, then drop the large tile onto row 1 to see displacement.
A
A
B
B
C
C
Large widget (2×2)
Drag this over smaller widgets - layout auto-compacts around it.
D
D
E
E
Sign in to view this example's source code.
Sign inProps
| Name | Type | Default | Description |
|---|---|---|---|
| items | GridItem[] | Required | Widgets with id, width/height spans, optional title, content, locked, priority, x/y |
| columns | number | Responsive (4 / 2 / 1) | Grid column count; omit for auto breakpoints |
| gap | number | 12 | Gap between cells in pixels |
| rowHeight | number | 120 | Height of one grid row in pixels |
| editable | boolean | true | Enable drag-and-drop and keyboard reorder |
| autoCompact | boolean | true | Best-fit spatial repack after each drop (scores movement, gaps, grouping) |
| resizable | boolean | true | Corner and edge resize handles with live collision recalculation |
| layouts | ResponsiveLayouts | undefined | Per-breakpoint layout snapshots (desktop / tablet / mobile) |
| persistenceKey / persistLayout | string / boolean | undefined / false | localStorage auto-save when persistLayout is true |
| debug | boolean | false | Occupancy grid, placement scores, and collision overlay |
| animated | boolean | true | Spring layout transitions (respects reduced motion) |
| contextId | string | auto (useId) | Stable DndContext id for SSR; set explicitly when multiple grids render on one page |
| renderItem | (item, state) => ReactNode | undefined | Custom widget renderer; state includes dragging, keyboardGrabbed |
| onLayoutChange | (items: GridItem[]) => void | undefined | Called when placement changes after drag or keyboard drop |
| className / classNames | string / SmartGridLayoutClassNames | undefined | Container and per-item class overrides |