dnd-kit
A toolkit for building drag and drop interfaces on the web, with adapters for several frameworks.
- Stars
- 17.8k
- Forks
- 929
- Licence
- MIT
- Language
- TypeScript
- Last update
- 6 days ago
- Type
- Library
What it is
dnd-kit is a set of JavaScript packages that let developers add drag and drop to web pages and apps. It has a framework-agnostic core and a DOM layer, plus thin adapters for React, Vue, Svelte, and SolidJS, with plain JavaScript also supported. It is used to build things like sortable lists, grids, and multi-container layouts.
- Reorder items in a sortable list with mouse, touch, or keyboard
- Move cards between multiple containers, such as a kanban board
- Build a grid layout where items can be rearranged
- Create a 2D drag interaction for a simple game
Great for
- Developers building sortable lists or grids in a React, Vue, Svelte, or Solid app
- Teams that want keyboard and screen reader support built into drag and drop
- Developers who need to customize sensors, collision detection, or animations
- Projects that want a lightweight, MIT-licensed drag and drop dependency
Not ideal for
- Non-programmers looking for a ready-made tool; it is a code library that must be integrated into a project
- Projects that only need simple file upload drop zones, since the README focuses on element dragging and does not cover that case
How to get it
- 1
Install with a package manager
You'll need: Node.js or a compatible JavaScript runtime · A package manager such as npm, pnpm, yarn, or bun
Clone the repository (contributors)
git clone https://github.com/clauderic/dnd-kitInstall dependencies (monorepo, from README)
bun installBuild all packages
bun run build - 2
Run it
- Pick your framework from the quickstart guides at dndkit.com
- Install the matching adapter package from npm, such as @dnd-kit/react
- Follow the quickstart to set up a draggable and droppable element
- Visit dndkit.com for interactive examples
- 3
Get the most out of it
- Use @dnd-kit/dom/sortable for sortable interfaces, as it is built on the core
- Use the collision and helpers packages for collision detection and utilities
- Customize screen reader instructions and live regions for accessibility
- Build custom sensors or key bindings if the defaults do not fit your interaction
Downloads
Strengths
- Supports pointer, mouse, touch, and keyboard input out of the box
- Framework-agnostic core with adapters for several popular frameworks
- Ships with default ARIA attributes and customizable screen reader instructions
Trade-offs
- As a toolkit, it requires writing code and understanding its layered package structure
- The README is truncated and points to external docs for full API details, so this entry relies on limited information
How it compares
| Project | Stars | Type | Level | Updated | Best for |
|---|---|---|---|---|---|
| dnd-kit (this) | 17.8k | Library | intermediate | 6 days ago | Developers building sortable lists or grids in a React, Vue, Svelte, or Solid app |
| react-dnd | 21.6k | Library | intermediate | 1.3 years ago | React developers building interfaces with draggable items such as lists, boards or sortable elements |
| interact.js | 12.9k | Library | intermediate | 3 months ago | Web developers building drag-and-drop interfaces |
| Sortable | 31.2k | Library | beginner | 8 months ago | Web developers adding reorderable lists to a site or app |
| draggable | 18.5k | Library | intermediate | 11 months ago | Front-end developers who want full control over how drag and drop feels and behaves |
| muuri | 10.9k | Library | intermediate | 2.5 years ago | Front-end developers building card or photo grids that need drag and drop or filtering |
Stats synced from GitHub. The assessment above was drafted with AI from the project's README on 2026-10-29 and may miss recent changes — check the README before relying on a command. MIT licence: free to use, modify and distribute, including commercially, as long as you keep the copyright notice.