For AI agents: the documentation index is at llms.txt. Markdown versions are available by appending .md to any page URL, including this page's markdown.
Basic example
Simple draggable and resizable grid.
How it works
The smallest useful dnd-grid setup: a layout array of items with id, x, y, w, and h, a column count, a row height, and an onLayoutChange handler. The grid is controlled, so the layout you pass in is the layout that renders, and every drag or resize hands you a new array to store.
Each child is matched to a layout entry by its key, which means you render your own markup inside every cell and dnd-grid only positions it. Start here, then add the behaviour you need from the other examples.
Installation
npx shadcn@latest add https://blode.co/dnd-grid/r/basic-example.jsonPublished with Edda