Guide · Open source

How to use dnd-kit: packages, adapters and sortable lists

Updated 2026-10-29 · written with AI from the project's own documentation and checked against our catalogue data

dnd-kit is an open-source JavaScript toolkit that lets developers add drag and drop to web pages and apps. It is a code library, not a standalone app, so you use it by installing its packages into a project. This guide explains how the packages are organised, which framework path to pick, how sortable lists fit in, and what to check before you commit to it.

dnd-kitclauderic/dnd-kit · ★ 17.8k · MIT Install options & downloads

Quick start

1Confirm your stack. Check that your project runs on Node.js or a compatible runtime and uses npm, pnpm, yarn or bun.
2Pick a framework path. Choose the Vanilla, React, Vue, Svelte or Solid quickstart that matches your app.
3Read the quickstart. Open the matching guide at dndkit.com and follow its install and setup steps.
4Add a sortable layer. Use @dnd-kit/dom/sortable for a reorderable list or grid.
5Test with keyboard and screen reader. Confirm reordering works by keyboard and that the default ARIA text makes sense in your interface.
6Customise where needed. Adjust sensors, collision detection, animations or screen reader instructions if the defaults do not fit.

What dnd-kit is and how its packages fit together

dnd-kit is built in layers. A framework-agnostic core (@dnd-kit/abstract) sits underneath a DOM implementation (@dnd-kit/dom), and thin adapters connect that to your framework of choice. The README lists adapters for React (@dnd-kit/react), Vue (@dnd-kit/vue), Svelte (@dnd-kit/svelte) and SolidJS (@dnd-kit/solid), and plain JavaScript is also supported.

Other packages in the monorepo cover collision detection (@dnd-kit/collision), geometry utilities (@dnd-kit/geometry), helper functions (@dnd-kit/helpers) and reactive state management (@dnd-kit/state). You only install what your project needs.

Pick the adapter that matches your framework, or use the vanilla JavaScript path.
Use @dnd-kit/dom/sortable if you are building a sortable interface; the README describes it as a thin layer on top of the core.

Choose a quickstart for your framework

The project's documentation at dndkit.com has a quickstart for each supported path. The README links to a Vanilla quickstart plus separate quickstarts for React, Vue, Svelte and Solid. Start from the one that matches the framework your app already uses rather than mixing adapters.

The README points to dndkit.com for full documentation, the API reference, guides and interactive examples. The install commands for your own project are in those guides, not in the README, so follow them there.

Vanilla: build drag and drop with plain JavaScript.
React: components and hooks.
Vue: composables and components.
Svelte: primitives and components.
Solid: hooks and components.

Set up the project and build from source

To use the packages in an app, you need Node.js or a compatible JavaScript runtime and a package manager such as npm, pnpm, yarn or bun. Install the packages for your framework through your package manager, following the quickstart for that framework.

If you want to contribute or work on the library itself, the README describes a monorepo managed with Turborepo and bun. Clone the repository, install dependencies, and build all packages with the commands below.

git clone https://github.com/clauderic/dnd-kit
bun install
bun run build

Build a sortable list

Sortable lists are the most common use case. The sortable layer lives at @dnd-kit/dom/sortable and sits on top of the core. The README also lists grids, multiple containers, nested contexts, variable sized items and virtualized lists as supported use cases.

Input works through pointer, mouse, touch and keyboard sensors, so the same list can be reordered by mouse, finger or keyboard without extra wiring of those input types.

Install the adapter for your framework, then import the sortable helper from @dnd-kit/dom/sortable.
Test with the keyboard as well as the mouse, since keyboard support is built in.

Customise sensors, collisions and accessibility

dnd-kit is designed to be customised. You can change animations, transitions, behaviours and styles, build your own sensors, write collision detection algorithms and change key bindings.

Accessibility is part of the default setup. The README says it provides keyboard support, sensible default ARIA attributes, and customisable screen reader instructions and live regions. Review those defaults and adjust the screen reader text to match your interface.

Sensors: pointer, mouse, touch and keyboard, or your own.
Collision detection: use the built-in algorithms or supply your own.
Accessibility: default ARIA attributes, plus customisable screen reader instructions and live regions.

Know what dnd-kit does not cover

dnd-kit focuses on dragging elements. The README does not cover simple file upload drop zones, so if that is all you need, look at a tool built for file input. It is also a code library, so non-programmers will need a ready-made application instead.

The comparable projects named for this tool are react-beautiful-dnd, SortableJS, react-dnd and interact.js. Compare them against your framework, accessibility needs and how much customisation you expect.

What people use it for

Sortable lists in a React, Vue, Svelte or Solid app.
Sortable grids and multi-container layouts such as moving items between columns.
Variable sized items and virtualized lists.
Nested drag and drop contexts.
Simple 2D game-style element dragging.

Frequently asked questions

Is dnd-kit free to use?

dnd-kit is released under the MIT licence, as stated in the README and repository. The MIT licence is permissive, so check the LICENSE file in the repository if you need the full terms for your project.

What do I need to install dnd-kit?

You need Node.js or a compatible JavaScript runtime and a package manager such as npm, pnpm, yarn or bun. Then install the packages for your framework following the quickstart at dndkit.com.

Which frameworks does dnd-kit support?

The README lists adapters for React, Vue, Svelte and SolidJS, and plain JavaScript is also supported through the Vanilla path. The core is framework-agnostic.

Does dnd-kit support keyboard and screen readers?

Yes. The README says it includes keyboard support, sensible default ARIA attributes, and customisable screen reader instructions and live regions.

How is dnd-kit different from react-beautiful-dnd or SortableJS?

The README does not compare them directly. It names react-beautiful-dnd, SortableJS, react-dnd and interact.js as comparable projects, so test the options against your framework and needs before choosing.

Can dnd-kit handle simple file upload drop zones?

The README does not cover file upload drop zones. It focuses on dragging elements, so a dedicated file upload tool may suit that job better.

New agent skills, repos and AI tools — every week

The best new skills and open-source projects, the fastest-growing repos, and one free prompt. Five minutes to read. Unsubscribe anytime.

Our verdict

dnd-kit suits developers building sortable lists, grids or custom drag interfaces in React, Vue, Svelte, Solid or plain JavaScript, especially where keyboard and screen reader support and customisation matter. Non-programmers, and projects that only need file upload drop zones, should pick a different tool.

Install options & downloads