dnd-kit — Modern Drag and Drop Toolkit for React

Introduction

dnd-kit was created as a modern replacement for react-beautiful-dnd and react-dnd. It takes a hooks-first approach with composable primitives, supports multiple input methods via pluggable sensors, and uses collision detection algorithms for precise drop targeting. The modular package structure lets you import only what you need.

What dnd-kit Does

• Provides drag-and-drop primitives via React hooks like useDraggable and useDroppable
• Includes a dedicated sortable preset for reorderable lists and grids
• Supports pointer, keyboard, and touch sensors out of the box
• Ships with collision detection algorithms: closest center, closest corners, and rectangle intersection
• Handles accessibility with keyboard navigation and screen reader announcements

Architecture Overview

dnd-kit is structured around a DndContext provider that manages drag state and coordinates sensors, collision detection, and modifiers. Draggable and droppable hooks register themselves with the context and receive transform values during drag operations. The sortable preset adds a SortableContext that tracks item order and computes animated transitions. Sensors abstract input handling so the same drag logic works with mouse, touch, and keyboard without code changes.

Self-Hosting & Configuration

• Install @dnd-kit/core for base primitives and @dnd-kit/sortable for list sorting
• Wrap your app or section in DndContext with an onDragEnd handler
• Use useDraggable and useDroppable hooks for custom drag-and-drop interactions
• Use SortableContext with a sorting strategy for list, grid, or horizontal layouts
• Add @dnd-kit/modifiers to constrain drag movement to an axis or container bounds

Key Features

• Hooks-based API that integrates naturally with React component patterns
• Pluggable sensors for pointer, keyboard, and touch with custom activation constraints
• Built-in accessibility with ARIA live regions and keyboard drag support
• Multiple collision detection strategies for different layout types
• Drag overlay support for rendering a custom preview during drag

Comparison with Similar Tools

• react-beautiful-dnd — Atlassian's library now archived; dnd-kit is actively maintained with more features
• SortableJS — framework-agnostic with React adapter; dnd-kit is React-native with hooks
• react-dnd — lower-level DnD primitives using HTML5 backend; dnd-kit has a more ergonomic API
• Pragmatic Drag and Drop — Atlassian's new library with framework-agnostic design; dnd-kit is React-focused with richer presets
• Framer Motion layout — animates layout changes; dnd-kit handles the full drag interaction lifecycle

FAQ

Q: How is dnd-kit different from react-beautiful-dnd? A: dnd-kit uses hooks instead of render props, supports more layout types, has pluggable collision detection, and is actively maintained. react-beautiful-dnd is archived.

Q: Can I use dnd-kit for kanban boards? A: Yes. Use multiple SortableContext containers within a single DndContext and handle cross-container moves in onDragEnd.

Q: Does dnd-kit support virtualized lists? A: Yes. The hooks work with virtualized containers since they only require ref attachment and transform application on mounted elements.

Q: How do I customize the drag preview? A: Use the DragOverlay component to render a custom element that follows the pointer during drag, independent of the original item.

Sources

• https://github.com/clauderic/dnd-kit
• https://dndkit.com
• https://docs.dndkit.com