Search...

⌘K

Examples Changelog Community

Overview

Learn how to build drag and drop interfaces with dnd kit

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:

Build drag and drop interfaces using plain TypeScript

Build drag and drop interfaces using React components and hooks

Build drag and drop interfaces using Vue composables and components

Build drag and drop interfaces using Svelte primitives and components

Build drag and drop interfaces using SolidJS hooks and components

Core Concepts

Learn the essential building blocks:

The central orchestrator that coordinates drag and drop operations

Elements that can be picked up and dragged to new locations

Target areas where draggable elements can be dropped

Draggable elements that can be reordered within and across lists

Extend and customize

Make it your own with powerful extension points:

Add new features and behaviors with the plugin system

Support different input methods like mouse, touch, and keyboard

Modify drag behavior with constraints and transformations

Sponsors