Installation
Last updated
Last updated
To get started with @dnd-kit, install the core library via npm or yarn:
You'll also need to be make sure you have peer dependencies installed. Chances are you already have react and react-dom installed in your project, but if not, make sure to install them:
In order to keep the core of the library small, @dnd-kit/core only ships with the main building blocks that the majority of users will need most of the time for building drag and drop experiences:
Hooks for:
Sensors for:
Modifiers let you dynamically modify the movement coordinates that are detected by sensors. They can be used for a wide range of use cases, for example:
Restricting motion to a single axis
Restricting motion to the draggable node container's bounding rectangle
Restricting motion to the draggable node's scroll container bounding rectangle
Applying resistance or clamping the motion
To start using modifiers, install the modifiers package via yarn or npm:
The @dnd-kit/core package provides all the building blocks you would need to build a sortable interface from scratch should you choose to, but thankfully you don't need to.
If you plan on building a sortable interface, we highly recommend you try out @dnd-kit/sortable, which is a small layer built on top of @dnd-kit/core and optimized for building silky smooth, flexible, and accessible sortable interfaces.
Each commit merged into the @dnd-kit main branch will trigger a development build to be released to npm under the next tag.
To try a development release before the official release, install each @dnd-kit package you intend to use with the @nexttag
The modifiers repository contains a number of useful modifiers that can be applied on as well as .