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.
Drag from outside
Drop external items into the grid.
How it works
Items do not have to originate inside the grid. This example makes an external palette draggable with the native HTML drag and drop API, then uses onDropDragOver to preview the incoming item's size and onDrop to commit it at the cell the pointer is over.
onDropDragOver returns the width and height the placeholder should take, so the grid can reflow underneath the cursor before the user commits. That preview is what makes an external drop feel like part of the grid rather than an append.
Installation
npx shadcn@latest add https://blode.co/dnd-grid/r/drag-from-outside-example.jsonPublished with Edda