Kitchen sink
A full-featured layout builder with external drag, multi-select, an action bar, and an edit panel, showing everything dnd-grid can do in one React example.
Add block
How it works
A full layout builder that combines most of the library at once: an external palette wired up with dnd-kit sensors, multi-select, an action bar, an edit panel bound to the selected item, custom resize handles, and the full set of drag lifecycle callbacks.
It is deliberately larger than the focused examples and is worth reading after them rather than first. Treat it as a reference for how the pieces interact — particularly how selection state, dragCancel, and the onDrag callbacks coexist without fighting each other.
Related examples
- Drag from outside — Drag external items from a palette and drop them into the grid to create new blocks on the fly in this drag-from-outside dnd-grid React example.
- Toolbox — Move items between the grid and a separate toolbox panel, dragging blocks in and out of an off-grid tray in this toolbox dnd-grid React example.
- Composition — Items read their own drag and resize state with useDndGridItemState to render state-aware content inside each cell in this dnd-grid React composition example.
- Resizable handles — Resize grid items from all eight edges and corners using the built-in resize handles in this resizable-handles dnd-grid React layout example.