Repolode
Submit
clauderic

clauderic/dnd-kit

A modern, lightweight drag and drop toolkit for the web, with a framework-agnostic core and adapters for React, Vue, Svelte and SolidJS.

View on GitHubWebsite
Stars
17,738
Forks
927
Open issues
134
Last commit
7 days ago

What is it?

dnd-kit is a drag and drop toolkit for building interactive interfaces on the web. It is split into layers: a framework-agnostic core (@dnd-kit/abstract), a DOM implementation (@dnd-kit/dom), and thin adapters for React, Vue, Svelte and SolidJS, with a plain JavaScript option as well.

The toolkit covers lists, grids, multiple containers, nested contexts, variable-sized items and virtualized lists. It ships pointer, mouse, touch and keyboard sensors, and lets developers replace sensors, collision detection algorithms and key bindings. A sortable layer (@dnd-kit/dom/sortable) is built on top of the core for common reorderable lists.

Accessibility is handled with keyboard support, default ARIA attributes, customizable screen reader instructions and live regions. The project is written in TypeScript and published under the MIT license.

Key features

  • 01Framework-agnostic core with adapters for React, Vue, Svelte and SolidJS
  • 02Pointer, mouse, touch and keyboard sensors built in
  • 03Supports lists, grids, multiple containers and virtualized lists
  • 04Customizable sensors, collision detection and key bindings
  • 05Sortable layer built on the core for reorderable lists
  • 06Keyboard support and default ARIA attributes for accessibility

Use cases

  • Building sortable lists or kanban-style boards in a React or Vue app
  • Creating drag-and-drop grids or layouts with multiple containers
  • Adding touch and keyboard-accessible reordering to a web interface

Quick start

  1. 1

    Pick your framework and follow its quickstart guide on dndkit.com

  2. 2

    Install the monorepo dependencies with bun

    bun install
  3. 3

    Start dev mode

    bun run dev

Topics

#drag-and-drop#react#vue#svelte#typescript#accessibility#sortable#ui-components#drag#draggable

FAQ

What is dnd-kit?
A modern, lightweight drag and drop toolkit for the web, with a framework-agnostic core and adapters for React, Vue, Svelte and SolidJS. dnd-kit is a drag and drop toolkit for building interactive interfaces on the web. It is split into layers: a framework-agnostic core (@dnd-kit/abstract), a DOM implementation (@dnd-kit/dom), and thin adapters for React, Vue, Svelte and SolidJS, with a plain JavaScript option as well.
Is dnd-kit free to use? What license does it have?
dnd-kit is open source under the MIT license. Check the license terms before using it in commercial products.
Is dnd-kit still maintained?
Actively maintained. The last commit to dnd-kit was on Oct 15, 2026.
What can I use dnd-kit for?
Building sortable lists or kanban-style boards in a React or Vue app Creating drag-and-drop grids or layouts with multiple containers Adding touch and keyboard-accessible reordering to a web interface
How do I install dnd-kit?
Pick your framework and follow its quickstart guide on dndkit.com Install the monorepo dependencies with bun: bun install Start dev mode: bun run dev
Where can I get dnd-kit?
The source code and installation instructions are on GitHub: https://github.com/clauderic/dnd-kit

Summary generated by AI from the project's README. GitHub stats refresh daily.

Related projects