@dnd-kit/core
Modern, accessible drag and drop toolkit for React. Modular architecture with sensors (mouse, touch, keyboard), collision detection algorithms, and composable modifiers. @dnd-kit/sortable builds sortable lists and grids. Designed for accessibility (keyboard DnD, screen reader announcements). Replacement for react-beautiful-dnd (deprecated) and react-dnd.
Score Breakdown
⚙ Agent Friendliness
🔒 Security
UI interaction library — no network access, no security concerns.
⚡ Reliability
Best When
Building complex drag-and-drop interactions in React where accessibility and customization matter.
Avoid When
Simple reorder lists where a lighter library or native HTML drag events suffice.
Use Cases
- • Build sortable lists and grids in React with @dnd-kit/sortable for kanban boards, priority lists, playlists
- • Implement drag-and-drop file uploads or canvas-based editors with custom sensor configuration
- • Create accessible drag interactions with full keyboard navigation support for a11y compliance
- • Build tree drag-and-drop for folder hierarchies or nested data structures
- • Implement multi-container drag-and-drop for kanban-style boards with cross-column card movement
Not For
- • Simple single-list reordering in vanilla JS — CSS-native drag events suffice for simple cases
- • Desktop apps — dnd-kit is React web only
- • File drag-and-drop from OS — use react-dropzone for OS-to-browser file dropping; dnd-kit handles in-page element DnD
Interface
Authentication
UI library — no auth needed.
Pricing
MIT licensed open source library.
Agent Metadata
Known Gotchas
- ⚠ DndContext must wrap all draggable and droppable components — missing it causes 'useDraggable must be used within a DndContext' errors
- ⚠ Drag overlay renders in a portal by default — ensure DragOverlay is inside DndContext but the clone doesn't affect layout
- ⚠ SortableContext items array must match the current order — not updating it after reorder causes incorrect drag behavior
- ⚠ Multiple DndContexts on the same page can cause event interference — use a single top-level DndContext when possible
- ⚠ Keyboard sensor requires explicit activation constraints to prevent accidental keyboard activation during typing — configure PointerSensor with activationConstraint
- ⚠ onDragEnd does not automatically move items — you must update your state array in the handler using arrayMove from @dnd-kit/sortable
Alternatives
Full Evaluation Report
Detailed scoring breakdown, competitive positioning, security analysis, and improvement recommendations for @dnd-kit/core.
Scores are editorial opinions as of 2026-03-06.