Skip to main content
@dnd-kit Hero

​
Welcome to dnd-kit

dnd-kit is a modern, lightweight, performant, accessible and extensible drag and drop toolkit for the web. It’s built with a framework-agnostic core and provides adapters for popular frameworks like React, Vue, Svelte, and SolidJS.

Quick start

Get up and running with your first drag and drop interface in minutes

Installation

Install dnd-kit in your project with your preferred package manager

API reference

Explore the complete API documentation and type definitions

Examples

Browse interactive examples and learn best practices

​
Why dnd-kit?

dnd-kit stands out from other drag and drop libraries with its unique architecture and feature set:

​
Framework agnostic core

The architecture is built in layers—a framework-agnostic core (@dnd-kit/abstract), a DOM implementation (@dnd-kit/dom), and thin adapters for your framework of choice. This means you can use the same drag and drop logic across different frameworks. 
import {DragDropProvider, useDraggable} from '@dnd-kit/react';

function App() {
  return (
    <DragDropProvider>
      <DraggableItem id="item-1" />
    </DragDropProvider>
  );
}

​
Wide range of use cases

Supports a diverse set of drag and drop patterns:
  • Sortable lists (vertical and horizontal)
  • Grid layouts with variable sized items
  • Multiple containers and nested contexts
  • Virtualized lists for performance
  • 2D games and canvas applications
  • Custom interactions and behaviors

​
Built-in accessibility

Accessibility is a first-class citizen in dnd-kit:
Full keyboard navigation support out of the box. Users can activate drag operations with Space or Enter, move items with arrow keys, and cancel with Escape.
Sensible default ARIA attributes and customizable screen reader instructions ensure users with assistive technologies can understand and interact with your drag and drop interfaces.
Built-in ARIA live regions announce drag and drop operations to screen reader users in real-time.

​
Performance focused

Built with performance in mind to support silky smooth animations even with large lists:
  • Minimal DOM updates during drag operations
  • Efficient collision detection algorithms
  • Support for virtualized lists
  • Optimized re-rendering strategies
  • GPU-accelerated transforms

​
Fully customizable

Customize every aspect of the drag and drop experience:

Sensors

Pointer, mouse, touch, and keyboard sensors with customizable activation constraints

Modifiers

Snap to grid, restrict to axis, apply constraints, and create custom modifiers

Collision detection

Multiple algorithms included, or build your own custom collision detection

Animations

Full control over transitions, animations, and visual feedback

Plugins

Extend functionality with plugins like Debug, Feedback, and custom implementations

Styling

Complete control over styles, no CSS required, bring your own styling solution

​
Architecture overview

Understanding dnd-kit’s layered architecture helps you make the most of the library:
1

Abstract core (@dnd-kit/abstract)

Framework-agnostic core that defines the fundamental drag and drop concepts, interfaces, and base classes.
2

DOM layer (@dnd-kit/dom)

DOM-specific implementation that handles browser events, sensors, and rendering for web applications.
3

Framework adapters

Thin adapters for React, Vue, Svelte, and SolidJS that provide framework-specific hooks, components, and patterns.

​
Core concepts

Before diving into the code, familiarize yourself with these core concepts:

​
Draggable

A draggable is any element that can be picked up and moved. You create draggables using the useDraggable hook (or equivalent in your framework). 
const {ref, isDragging} = useDraggable({
  id: 'unique-id',
  element: elementRef,
});

​
Droppable

A droppable is a designated area where draggables can be dropped. Create droppables using the useDroppable hook. 
const {ref, isDropTarget} = useDroppable({
  id: 'droppable-area',
  element: elementRef,
});

​
DragDropProvider

The DragDropProvider wraps your drag and drop interface and manages the drag operation state, event handling, and coordination between draggables and droppables. 
<DragDropProvider
  onDragStart={(event) => console.log('Drag started', event)}
  onDragEnd={(event) => console.log('Drag ended', event)}
>
  {/* Your draggables and droppables */}
</DragDropProvider>

​
Sensors

Sensors detect input methods (pointer, mouse, touch, keyboard) and initiate drag operations. You can configure which sensors to use and their activation constraints.

​
Modifiers

Modifiers transform the position of draggable elements during a drag operation. Common modifiers include restricting movement to an axis or snapping to a grid.

​
Packages

@dnd-kit/abstract

Framework-agnostic core package with fundamental drag and drop primitives

@dnd-kit/dom

DOM-specific implementation with sensors, collision detection, and rendering

@dnd-kit/react

React hooks and components for building drag and drop interfaces

@dnd-kit/vue

Vue composables and components for drag and drop functionality

@dnd-kit/svelte

Svelte stores and components for drag and drop interactions

@dnd-kit/solid

SolidJS primitives and components for drag and drop

@dnd-kit/collision

Collision detection algorithms for determining drop targets

@dnd-kit/geometry

Geometry utilities for calculating positions, distances, and intersections

@dnd-kit/state

Reactive state management utilities

@dnd-kit/helpers

Helper functions for common drag and drop operations

​
Next steps

Ready to build your first drag and drop interface?

Install dnd-kit

Choose your framework and install the necessary packages

Follow the quick start

Build a working drag and drop example in minutes

Build docs developers (and LLMs) love

Get started for freeTalk to us