dnd-kit

@dnd-kit/core is the foundation of the dnd-kit family — a modern, lightweight toolkit for adding drag-and-drop interactions to React applications. Rather than shipping a single opinionated drag-and-drop widget, it exposes composable primitives (a DndContext provider, useDraggable/useDroppable hooks, pluggable sensors, and swappable collision-detection algorithms) so teams can build anything from simple reorderable lists to complex multi-container kanban boards and 2D canvases.

It ships with first-class accessibility (keyboard sensor, screen-reader announcements, focus management) and performance (transform-based dragging, minimal re-renders via a split public/internal context) built in rather than bolted on, which is a large part of why it has become the default choice for drag-and-drop in the React ecosystem, powering libraries like @dnd-kit/sortable and countless production kanban/list-reordering UIs.

What You Get

• DndContext provider plus useDraggable/useDroppable hooks for wiring drag sources and drop targets into any component tree
• Pluggable sensors (Pointer, Mouse, Touch, Keyboard) that decouple input handling from drag orchestration
• Swappable collision-detection algorithms (closestCenter, closestCorners, rectIntersection, pointerWithin) for computing what’s being dragged over
• DragOverlay component for rendering a portalled, animated clone of the dragged item
• Built-in accessibility: keyboard dragging, screen-reader announcements, and focus restoration
• A modifiers pipeline for constraining movement (e.g. to an axis or a bounding box) without touching core logic

Common Use Cases

• Reorderable lists and grids (task boards, playlists, file managers)
• Multi-column kanban boards with cross-column dragging
• Custom drag handles and nested draggable/droppable regions
• Accessible drag-and-drop that must support keyboard-only and screen-reader users

Under The Hood

Architecture — DndContext (packages/core/src/components/DndContext/DndContext.tsx, ~770 lines) is the root provider: it wraps a useReducer state machine (store/reducer.ts) that tracks draggable state (active node, initial coordinates, translate) and a droppable-containers map (store/constructors.ts), exposed through two split React contexts — a PublicContext for consumers and an InternalContext for internal wiring — to avoid unnecessary re-renders. useDraggable and useDroppable (hooks/useDraggable.ts, hooks/useDroppable.ts) register and unregister nodes into that store on mount/unmount. User input is abstracted behind a pluggable Sensor interface (sensors/pointer/PointerSensor.ts and sibling Mouse/Touch/Keyboard sensors), each implementing an activation-constraint plus coordinate-getter contract, decoupling drag origin from orchestration. Collision detection is likewise pluggable (utilities/algorithms: closestCenter, closestCorners, rectIntersection, pointerWithin) and is invoked during pointer movement to compute what’s being dragged over. DragOverlay (components/DragOverlay) renders a portal-based, independently animated clone of the dragged node, decoupling visual drag feedback from the original DOM node’s layout. Modifiers (modifiers/) form a middleware-style pipeline (applyModifiers) that transforms the computed transform before it’s applied, enabling axis-locking or bounding-box restriction without touching core logic.

Tech Stack — TypeScript throughout, with React >=16.8 as a peer dependency (hooks-based, no class components). Built with tsdx into both a CJS (dist/index.js) and ESM (dist/core.esm.js) bundle plus generated .d.ts typings. Its only runtime dependencies are two sibling packages in the same monorepo — @dnd-kit/accessibility (screen-reader announcements) and @dnd-kit/utilities (DOM/coordinate helpers) — plus tslib, keeping the published bundle free of third-party runtime dependencies. The wider monorepo is orchestrated with Lerna, uses Storybook for interactive docs/development, Cypress for browser e2e tests, and Chromatic for visual regression.

Code Quality — At the @dnd-kit/core@6.3.1 tag, the package-local test/core.test.tsx is just a placeholder assertion, so meaningful behavioral coverage instead lives in the repo’s top-level Cypress e2e suite (cypress/integration/draggable_spec.ts and others) that exercises DndContext end-to-end in a real browser, backed by a large Storybook catalogue (stories/1 - Core, stories/2 - Presets, stories/3 - Examples) that doubles as living documentation and visual-regression coverage via Chromatic. Source is consistently typed with exported types for every public hook/component, organized into strict single-responsibility modules (store/, sensors/, hooks/, utilities/, modifiers/), and follows consistent naming (use* hooks, *Sensor classes, an Action enum driving the reducer). The internal/public context split is a deliberate encapsulation boundary rather than an incidental one.

API Design — The public surface is small and idiomatic: a <DndContext> provider plus useDraggable/useDroppable hooks mirror React’s own conventions, and sensors, collision detection, and modifiers are all supplied as plain prop arrays/functions rather than requiring subclassing, so extending behavior is additive. <DragOverlay> is a standout DX choice — it solves the common ‘dragged item snaps back to its origin’ visual glitch that other libraries leave to consumers. No CSS is required and styling is framework-agnostic (consumers apply the provided transform via a CSS.Translate.toString(transform) utility). The one friction point is that wiring attributes/listeners/setNodeRef from useDraggable onto a DOM node takes three separate pieces instead of a single spread prop, and keyboard/screen-reader accessibility requires deliberately configuring sensors rather than being defaulted.