Overview
Learn how to build drag and drop interfaces with dnd kit
Getting started
To get started, choose your preferred framework:
React
React components and hooks for building drag and drop interfaces
Vanilla
Build drag and drop interfaces with plain JavaScript
Concepts
Learn about the core concepts you’ll need to build drag and drop interfaces:
Manager
Configure and orchestrate the drag and drop operations.
Draggable
Make elements draggable to drop them over droppable targets.
Droppable
Create droppable targets for draggable elements.
Sortable
Reorder elements in a list or across multiple lists.
Extensibility
Learn how to extend the core functionality with plugins, sensors, and modifiers:
Plugins
Use plugins to extend the core functionality with plugins.
Sensors
Use sensors to detect user input and translate it into drag and drop events.
Modifiers
Use modifiers to modify or restrict the behavior of draggable elements