dnd kit – a lightweight React library for building performant and accessible drag and drop experiences
@dnd-kit/core is a modern, modular drag-and-drop toolkit for React applications that provides low-level primitives for building custom DnD interfaces. Unlike monolithic solutions, it offers a composable API centered around the DndContext provider, useDraggable and useDroppable hooks, and customizable sensors for mouse, touch, and keyboard interactions. At just 10kb minified with zero dependencies, it prioritizes performance and bundle size while maintaining full accessibility through built-in screen reader announcements and keyboard navigation.
The library emerged as a response to limitations in existing solutions like react-beautiful-dnd (now deprecated) and the complexity of react-dnd's backend system. With over 8 million weekly downloads, it has become the go-to choice for developers building sortable lists, kanban boards, dashboard builders, and complex nested drag-and-drop interfaces. Its framework-agnostic core means the underlying logic can theoretically work with Vue, Svelte, or vanilla JavaScript, though React bindings are the primary focus.
What sets @dnd-kit/core apart is its extensibility model. Every aspect—collision detection algorithms, input sensors, drag constraints, and coordinate modifiers—can be customized or replaced. This makes it suitable for both simple sortable lists and advanced use cases like virtualized data grids, 2D game boards, and multi-container drag operations. The library handles the complex state management and event coordination while giving you complete control over rendering, animations, and business logic.
Developers choose @dnd-kit/core when they need fine-grained control without reinventing core DnD mechanics. It handles edge cases like touch device quirks, auto-scrolling during drags, and accessible announcements, letting you focus on your application's unique requirements rather than low-level event handling.
import React, { useState } from 'react';
import { DndContext, useDraggable, useDroppable } from '@dnd-kit/core';
import { CSS } from '@dnd-kit/utilities';
function Draggable({ id, children }) {
const { attributes, listeners, setNodeRef, transform } = useDraggable({ id });
const style = {
transform: CSS.Translate.toString(transform),
padding: '16px',
border: '2px solid #333',
borderRadius: '4px',
background: '#f0f0f0',
cursor: 'grab'
};
return (
<div ref={setNodeRef} style={style} {...listeners} {...attributes}>
{children}
</div>
);
}
function Droppable({ id, children }) {
const { setNodeRef, isOver } = useDroppable({ id });
const style = {
padding: '32px',
border: '2px dashed #666',
borderRadius: '8px',
background: isOver ? '#e0ffe0' : '#fff',
minHeight: '200px'
};
return <div ref={setNodeRef} style={style}>{children}</div>;
}
function App() {
const [parent, setParent] = useState(null);
function handleDragEnd(event) {
const { over } = event;
setParent(over ? over.id : null);
}
return (
<DndContext onDragEnd={handleDragEnd}>
<Droppable id="droppable-1">
{parent === 'droppable-1' ? <Draggable id="draggable">Drag me</Draggable> : 'Drop here'}
</Droppable>
<Droppable id="droppable-2">
{parent === 'droppable-2' ? <Draggable id="draggable">Drag me</Draggable> : 'Or here'}
</Droppable>
{parent === null && <Draggable id="draggable">Drag me</Draggable>}
</DndContext>
);
}
export default App;Sortable Lists and Kanban Boards: Build task management interfaces where users drag cards between columns or reorder items within lists. The library handles collision detection and provides drag overlay components, while you control the data mutations and animations.
Dashboard Builders: Create customizable dashboards where users rearrange widget panels. Using multiple droppable zones with custom collision detection, you can implement grid snapping, resize constraints, and persistence of layout state.
File Managers and Nested Trees: Implement folder hierarchies where users drag files into folders or reorder nested items. The library supports multi-level droppable contexts and provides the active draggable state needed to show valid drop targets dynamically.
Virtualized Data Grids: Combine with react-virtual or react-window to build performant drag-and-drop tables with thousands of rows. The lightweight design and custom sensors allow smooth scrolling while dragging without re-rendering the entire list.
Game Development: Build tile-based games, puzzle interfaces, or level editors where elements snap to grid positions. Custom collision detection and modifiers enable precise control over movement constraints and valid placement logic.
npm install @dnd-kit/corepnpm add @dnd-kit/corebun add @dnd-kit/core