To get started with @dnd-kit, install the core library via npm or yarn:
1
npm install @dnd-kit/core
Copied!
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:
1
npminstall react react-dom
Copied!
Packages
dnd kit is a monorepo. Depending on your needs, you may also want to install other sub-packages that are available under the @dnd-kit namespace.
Core library
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:
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
The modifiers repository contains a number of useful modifiers that can be applied on DndContext as well as DraggableClone.
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.