Introduction
API Documentation
Presets
Guides
Installation
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
npm install 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
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:
1
npm install @dnd-kit/modifiers
Copied!
Presets
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.1
npm install @dnd-kit/sortable
Copied!
Development releases
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
@nexttag1
npm install @dnd-kit/[email protected] @dnd-kit/[email protected]
Copied!
Development releases can be unstable, we recommend you lock to a specific development release if you intend to use them in production.
Last modified 15h ago
Copy link
Edit on GitHub