> ## Documentation Index
> Fetch the complete documentation index at: https://dnd-grid.blode.md/docs/llms.txt
> Use this file to discover all available pages before exploring further.

# Installation

## Installation

```bash
npm install @dnd-grid/react
```

Need the headless engine for a custom adapter?

```bash
npm install @dnd-grid/core
```

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

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

## Usage

```tsx
import { DndGrid, type Layout } from "@dnd-grid/react"
```

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