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.
Responsive layout
Breakpoint layouts based on container width.
How it works
ResponsiveDndGrid takes a layouts object keyed by breakpoint instead of a single layout array, and picks the right one from the measured container width. Because it measures the container rather than the viewport, a grid inside a sidebar breaks at the sidebar's width.
Each breakpoint keeps its own arrangement, so rearranging on a narrow screen does not disturb the desktop layout. If you need the breakpoint value in your own code, useDndGridResponsiveLayout exposes the same resolution logic.
Installation
npx shadcn@latest add https://blode.co/dnd-grid/r/responsive-example.jsonPublished with Edda