Installation

Packages

snapgrid is a small monorepo. Pick what you need:

Package	What it is	When you need it
`@snapgridjs/react`	React components + hooks. Pulls in `@snapgridjs/core`.	Always. This is the main entry point.
`@snapgridjs/core`	Framework-agnostic layout engine (move/resize/compaction, geometry).	Installed automatically with `@snapgridjs/react`. Depend on it directly only for custom non-React integrations.
`@snapgridjs/extras`	Optional packers: `masonry`, `gravity`, `shelf`, `wrap`.	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, which you install alongside it:

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

snapgrid is built on dnd-kit’s latest framework-agnostic architecture (@dnd-kit/react / @dnd-kit/dom), the line dnd-kit now recommends over the legacy @dnd-kit/core. snapgrid wraps it behind a single seam in @snapgridjs/core, so your app only ever imports from @snapgridjs/*.

No stylesheet to import

snapgrid ships zero CSS. Components return positioning styles inline and a handful of stable class names / data attributes for you to target. There is no import "@snapgridjs/react/styles.css" step. See Styling for the hooks you can style against.

Framework notes

Vite / CRA / plain React: nothing special; it just works.
Next.js / Remix (SSR): fully supported. useContainerWidth is SSR-safe and renders at an initial width on the server, then measures on the client. See Server-side rendering.
TypeScript: snapgrid is written in TypeScript and ships its own types. No @types/* needed.