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.
Allow overlap
Let items stack without collision.
How it works
Compaction is what stops two grid items occupying the same cell. Swapping the compactor changes that rule: this example toggles between verticalCompactor, which pulls items upward and pushes colliding neighbours out of the way, and verticalOverlapCompactor, which lets items sit on top of one another.
Overlap is useful for canvas-style surfaces where the user is arranging free-floating cards rather than filling a dense dashboard. Because the compactor is just a function passed to the compactor prop, you can flip it at runtime — as the toggle here does — or supply your own to encode a different packing rule.
Installation
npx shadcn@latest add https://blode.co/dnd-grid/r/allow-overlap-example.jsonPublished with Edda