Installation

Packages

snapgrid is a small monorepo. Most apps install only @snapgridjs/react.

Package	What it is	When you need it
`@snapgridjs/react`	React components + hooks. Pulls in `@snapgridjs/dnd` + `@snapgridjs/core`.	Always — the main entry point.
`@snapgridjs/core`	Framework-agnostic layout math (move/resize/compaction, geometry, drag-session).	Comes in automatically. Depend on it directly only to drive layout without dnd-kit or React.
`@snapgridjs/dnd`	Framework-agnostic dnd-kit engine (the drag/resize/cross-grid brain). Pulls in `@snapgridjs/core`.	Comes in automatically. Depend on it directly only to build a binding for another framework.
`@snapgridjs/extras`	Optional packers: `masonry`, `gravity`, `shelf`, `wrap`, and the fast `O(n log n)` compactors.	Only if you use those packing styles.

Install

pnpm


pnpm add @snapgridjs/react @dnd-kit/react @dnd-kit/dom

npm


npm install @snapgridjs/react @dnd-kit/react @dnd-kit/dom

yarn


yarn add @snapgridjs/react @dnd-kit/react @dnd-kit/dom

bun


bun add @snapgridjs/react @dnd-kit/react @dnd-kit/dom

Peer dependencies

snapgrid drives the interaction through dnd-kit, declared as peer dependencies so you control the version and there’s only ever one copy:

@dnd-kit/react — the React bindings (DragDropProvider, useDraggable, DragOverlay).
@dnd-kit/dom — the DOM sensors and feedback plugins.
react / react-dom 18 or 19.

Because dnd-kit is a peer dependency, snapgrid doesn’t bundle its own copy — it composes the one you install. Your grid and any other dnd-kit draggables in your app share a single DragDropProvider context, which is exactly what makes cross-grid and external drops work.

One import source (optional)

@snapgridjs/react re-exports the dnd-kit primitives you’ll commonly need for a grid — DragOverlay, useDraggable, useDroppable, Feedback, PointerSensor, KeyboardSensor — so you can import everything from one place:


// Either of these works; the re-export just saves an import line.
import { DragOverlay, useDraggable } from "@snapgridjs/react";
import { DragOverlay, useDraggable } from "@dnd-kit/react";

DragDropProvider is not re-exported — import it from @dnd-kit/react. It’s the one dnd-kit piece you always reach for directly, a reminder that the grid lives in your dnd-kit tree.

No stylesheet to import

snapgrid ships zero CSS. Components return positioning styles inline plus a few stable class names and data attributes for you to target. There is no import "@snapgridjs/react/styles.css" step. See Styling for what’s exposed.

Framework notes

Vite / CRA / plain React — nothing special; it just works.
Next.js / Remix (SSR) — fully supported. useContainerWidth is SSR-safe: it renders at an initial width on the server, then measures on the client. The file that renders a grid must be a client component ("use client"), since dnd-kit attaches sensors in effects. See Server-side rendering.
TypeScript — snapgrid is written in TypeScript and ships its own types. No @types/* needed.