dnd-kit is a modern toolkit for building drag and drop interfaces, written in TypeScript and maintained primarily by clauderic. The project describes itself as a lightweight, performant, accessible, and extensible solution for web-based drag and drop functionality.
The architecture is built in layers to support multiple frameworks. At the foundation sits @dnd-kit/abstract, a framework-agnostic core, followed by @dnd-kit/dom, which provides a DOM implementation. On top of these foundations are thin adapters for specific frameworks including React, Vue, Svelte, SolidJS, and vanilla JavaScript. This layered approach allows developers to use dnd-kit with their preferred framework while maintaining a consistent underlying implementation.
The toolkit supports a broad range of use cases including lists, grids, multiple containers, nested contexts, variable sized items, virtualized lists, and 2D games. It includes built-in support for multiple input methods through pointer, mouse, touch, and keyboard sensors. The package ecosystem includes @dnd-kit/collision for collision detection, @dnd-kit/geometry for geometry utilities, @dnd-kit/helpers for helper functions, @dnd-kit/state for reactive state management, and @dnd-kit/dom/sortable as a specialized layer for building sortable interfaces.
Accessibility is a core consideration in dnd-kit's design, with keyboard support, sensible default ARIA attributes, customizable screen reader instructions, and built-in live regions. The toolkit is designed with performance in mind to support smooth animations, and it offers full customization and extensibility across animations, transitions, behaviors, styles, sensors, collision detection algorithms, and key bindings.
The project operates as a monorepo managed with Turborepo and bun. Beyond clauderic's primary involvement, timagixe and RubenZx have contributed significantly to triage and development activities.
