https://github.com/clauderic/dnd-kit
The modern toolkit for building drag and drop interfaces
https://github.com/clauderic/dnd-kit
drag drag-and-drop draggable droppable react sortable
Last synced: 14 days ago
JSON representation
The modern toolkit for building drag and drop interfaces
- Host: GitHub
- URL: https://github.com/clauderic/dnd-kit
- Owner: clauderic
- License: mit
- Created: 2020-11-26T00:46:52.000Z (over 5 years ago)
- Default Branch: main
- Last Pushed: 2026-02-16T03:28:48.000Z (16 days ago)
- Last Synced: 2026-02-16T04:32:43.573Z (16 days ago)
- Topics: drag, drag-and-drop, draggable, droppable, react, sortable
- Language: TypeScript
- Homepage: http://dndkit.com
- Size: 9.35 MB
- Stars: 16,594
- Watchers: 38
- Forks: 838
- Open Issues: 53
-
Metadata Files:
- Readme: README.md
- Funding: .github/FUNDING.yml
- License: LICENSE
Awesome Lists containing this project
- best-of-react - GitHub - 47% open · ⏱️ 03.06.2024): (Drag & Drop)
- react-components - dnd-kit
- awesome-fullstack - DND Kit
- best-of-react - GitHub - 47% open · ⏱️ 03.06.2024): (Drag & Drop)
- awesome-list - dnd-kit
- awesome-starred-test - clauderic/dnd-kit - The modern, lightweight, performant, accessible and extensible drag & drop toolkit for React. (TypeScript)
- awesome - clauderic/dnd-kit
- awesome-repos - dnd-kit
- awesome-libraries - dnd-kit
- awesome-github-repos - clauderic/dnd-kit - The modern toolkit for building drag and drop interfaces (TypeScript)
- awesome - clauderic/dnd-kit - The modern toolkit for building drag and drop interfaces (TypeScript)
- my-awesome-list - dnd-kit
- awesome-lesscode - dnd-kit - kit)](https://github.com/clauderic/dnd-kit)  (精选 LessCode 项目)
README
A modern, lightweight, performant, accessible and extensible drag and drop toolkit for the web
## Features
- **Framework agnostic core:** The architecture is built in layers — a framework-agnostic core (`@dnd-kit/abstract`), a DOM implementation (`@dnd-kit/dom`), and thin adapters for your framework of choice.
- **Supports a wide range of use cases:** lists, grids, multiple containers, nested contexts, variable sized items, virtualized lists, 2D games, and more.
- **Built-in support for multiple input methods:** Pointer, mouse, touch and keyboard sensors.
- **Fully customizable & extensible:** Customize every detail — animations, transitions, behaviours, styles. Build your own sensors, collision detection algorithms, customize key bindings and more.
- **Accessibility:** Keyboard support, sensible default ARIA attributes, customizable screen reader instructions and live regions built-in.
- **Performance:** Built with performance in mind to support silky smooth animations.
- **Sortable:** Need to build a sortable interface? Check out `@dnd-kit/dom/sortable`, a thin layer built on top of the core.
Getting started
Choose your preferred framework to get started:
Build drag and drop interfaces using plain JavaScript
Build drag and drop interfaces using React components and hooks
Build drag and drop interfaces using Vue composables and components
Build drag and drop interfaces using Svelte primitives and components
Build drag and drop interfaces using SolidJS hooks and components
## Documentation
Visit **[dndkit.com](https://dndkit.com)** for full documentation, API reference, guides, and interactive examples.
## Packages
| Package | Version | Description |
| ------------------------------------------ | ------------------------------------------------------------------------------------------------ | ---------------------------- |
| [`@dnd-kit/abstract`](packages/abstract) | [](https://npm.im/@dnd-kit/abstract) | Abstract core |
| [`@dnd-kit/collision`](packages/collision) | [](https://npm.im/@dnd-kit/collision) | Collision detection |
| [`@dnd-kit/dom`](packages/dom) | [](https://npm.im/@dnd-kit/dom) | Framework-agnostic DOM layer |
| [`@dnd-kit/geometry`](packages/geometry) | [](https://npm.im/@dnd-kit/geometry) | Geometry utilities |
| [`@dnd-kit/helpers`](packages/helpers) | [](https://npm.im/@dnd-kit/helpers) | Helper functions |
| [`@dnd-kit/react`](packages/react) | [](https://npm.im/@dnd-kit/react) | React adapter |
| [`@dnd-kit/solid`](packages/solid) | [](https://npm.im/@dnd-kit/solid) | SolidJS adapter |
| [`@dnd-kit/state`](packages/state) | [](https://npm.im/@dnd-kit/state) | Reactive state management |
| [`@dnd-kit/svelte`](packages/svelte) | [](https://npm.im/@dnd-kit/svelte) | Svelte adapter |
| [`@dnd-kit/vue`](packages/vue) | [](https://npm.im/@dnd-kit/vue) | Vue adapter |
## Contributing
This is a monorepo managed with [Turborepo](https://turbo.build/) and [bun](https://bun.sh/).
```bash
# Install dependencies
bun install
# Build all packages
bun run build
# Run dev mode
bun run dev
```
## License
[MIT](./LICENSE)