# dnd-kit — Modern Drag and Drop Toolkit for React

> dnd-kit is a lightweight, modular, performant, and accessible drag-and-drop toolkit built for React with hooks, sensors, and collision detection algorithms.

## Install

Save in your project root:

# dnd-kit — Modern Drag and Drop Toolkit for React

## Quick Use
```bash
npm install @dnd-kit/core @dnd-kit/sortable @dnd-kit/utilities
```
```jsx
import { DndContext, closestCenter } from '@dnd-kit/core';
import { SortableContext, verticalListSortingStrategy, useSortable } from '@dnd-kit/sortable';
import { CSS } from '@dnd-kit/utilities';

function SortableItem({ id }) {
  const { attributes, listeners, setNodeRef, transform, transition } = useSortable({ id });
  const style = { transform: CSS.Transform.toString(transform), transition };
  return <div ref={setNodeRef} style={style} {...attributes} {...listeners}>{id}</div>;
}

function App() {
  const [items, setItems] = useState(['A', 'B', 'C']);
  return (
    <DndContext collisionDetection={closestCenter} onDragEnd={handleDragEnd}>
      <SortableContext items={items} strategy={verticalListSortingStrategy}>
        {items.map(id => <SortableItem key={id} id={id} />)}
      </SortableContext>
    </DndContext>
  );
}
```

## 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

---
Source: https://tokrepo.com/en/workflows/25d99df3-44b3-11f1-9bc6-00163e2b0d79
Author: AI Open Source