dnd-griddnd-grid

React drag-and-drop grid

A drag-and-drop, resizable grid layout for React

Get startedGitHub
npm install @dnd-grid/react

A practical grid for React dashboards and editors

DnD Grid turns React children into draggable and resizable tiles. You own the layout state; the library handles pointer and keyboard interaction, collision detection, compaction, responsive columns, and size constraints.

Basic controlled gridResponsive dashboardConstrained resizingSaved layouts

Installation

npm install @dnd-grid/react

Add the styles to your global CSS file (e.g. globals.css):

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

Usage

import { DndGrid, type Layout } from "@dnd-grid/react"
<DndGrid
  layout={layout}
  cols={12}
  rowHeight={50}
  onLayoutChange={setLayout}
>
  {layout.map((item) => (
    <div key={item.id}>{item.id}</div>
  ))}
</DndGrid>