dnd-grid

Drag, resize, and drop across every example on the site, or read the API reference in the docs.

npm install @dnd-grid/react

Add the styles to your global CSS:

@import "@dnd-grid/react/styles.css";

import { DndGrid, type Layout } from "@dnd-grid/react";
import { useState } from "react";

const initialLayout: Layout = [
  { id: "a", x: 0, y: 0, w: 3, h: 2 },
  { id: "b", x: 3, y: 0, w: 3, h: 2 },
  { id: "c", x: 6, y: 0, w: 6, h: 2 },
];

export function Dashboard() {
  const [layout, setLayout] = useState<Layout>(initialLayout);

  return (
    <DndGrid cols={12} layout={layout} onLayoutChange={setLayout} rowHeight={50}>
      {layout.map((item) => (
        <div key={item.id}>{item.id}</div>
      ))}
    </DndGrid>
  );
}

• Drag and resize: weighted drag physics, configurable resize handles, edge auto-scroll, and a touch drag delay so page scrolling still works.
• Go responsive: breakpoint column maps, with container width measured automatically.
• Control packing: vertical, horizontal, and overlap compactors, plus position, size, and aspect-ratio constraints.
• Persist layouts: add and remove items, then serialize the layout and restore it later.
• Theme it: base.css and theme.css split apart, CSS variables, and data attributes on every item.
• Announce changes: grid semantics with configurable aria-live announcements.

• Works with React 17, 18, and 19.
• @dnd-grid/core is the same layout engine with no React dependency, for building an adapter to another framework.
• Based on react-grid-layout by Samuel Reed, adding weighted drag physics, edge auto-scroll, touch drag delay, and stronger styling defaults.

MIT

Crafted by Matthew Blode