dnd kit – The modern toolkit for building drag and drop interfaces
dnd kit

Overview

Learn how to build drag and drop interfaces with

Key features

  • Framework agnostic: First-class support for React, Vue, Svelte, Solid, and TypeScript
  • Batteries included: Drag, drop, sort, and reorder in any layout or direction
  • Fully extensible: Plugins, sensors, and modifiers for complete control
  • Production ready: Built for performance, accessibility, and reliability

Getting started

Choose your preferred framework to get started:

TypeScript

Build drag and drop interfaces using plain TypeScript

React

Build drag and drop interfaces using React components and hooks

Vue

Build drag and drop interfaces using Vue composables and components

Svelte

Build drag and drop interfaces using Svelte primitives and components

Solid

Build drag and drop interfaces using SolidJS hooks and components

Core Concepts

Learn the essential building blocks:

Manager

The central orchestrator that coordinates drag and drop operations

Draggable

Elements that can be picked up and dragged to new locations

Droppable

Target areas where draggable elements can be dropped

Sortable

Draggable elements that can be reordered within and across lists

Extend and customize

Make it your own with powerful extension points:

Plugins

Add new features and behaviors with the plugin system

Sensors

Support different input methods like mouse, touch, and keyboard

Modifiers

Modify drag behavior with constraints and transformations

Sponsors

Sentry
Any.do
Doist
Puck
HTTPie
Mintlify