dnd-kit

dnd-kit is a lightweight, modular, and accessible drag and drop toolkit for building modern web interfaces, with first-class support for React, Vue, Svelte, Solid, and TypeScript. The library takes a batteries-included yet fully extensible approach, providing the building blocks to implement drag, drop, sort, and reorder interactions in any layout or direction while remaining tree-shakeable with zero dependencies. Core concepts revolve around the DragDropManager that orchestrates the entire drag lifecycle, Draggable components that serve as the source of drag operations, Droppable components that define valid drop targets, and the Sortable strategy for reordering items within lists, grids, and nested structures. The extensibility layer separates concerns into Plugins for high-level behavior composition, Sensors for input modality detection supporting mouse, touch, pen, and keyboard with screen-reader announcements, and Modifiers for constraining or transforming drag movement along axes, snap-to-grid, or custom bounding boxes. The keyboard sensor provides full accessibility with arrow key navigation, tab traversal, and space to pick up and drop items. Performance is prioritized through optimistic updates, DOMRect-based collision detection algorithms including closest center, closest corners, and pointer within rect, and minimal DOM mutations. The toolkit supports nested draggable trees, multiple containers, virtualized lists, and concurrent drag operations. Sponsors include Sentry, Doist, HTTPie, and Mintlify. Created by Clauderic Desrochers. Copyright 2026.