dnd-kit README

The project's README from github.com/clauderic/dnd-kit. As one markdown file: README.md.

@dnd-kit – the modern toolkit for building drag & drop interfaces

A modern, lightweight, performant, accessible and extensible drag and drop toolkit for the web

Features

Getting started

Choose your preferred framework to get started:



JavaScript

Vanilla

Build drag and drop interfaces using plain JavaScript


React

React

Build drag and drop interfaces using React components and hooks


Vue

Vue

Build drag and drop interfaces using Vue composables and components


Svelte

Svelte

Build drag and drop interfaces using Svelte primitives and components


SolidJS

Solid

Build drag and drop interfaces using SolidJS hooks and components

Documentation

Visit dndkit.com for full documentation, API reference, guides, and interactive examples.

Packages

Package Version Description
@dnd-kit/abstract npm Abstract core
@dnd-kit/collision npm Collision detection
@dnd-kit/dom npm Framework-agnostic DOM layer
@dnd-kit/geometry npm Geometry utilities
@dnd-kit/helpers npm Helper functions
@dnd-kit/react npm React adapter
@dnd-kit/solid npm SolidJS adapter
@dnd-kit/state npm Reactive state management
@dnd-kit/svelte npm Svelte adapter
@dnd-kit/vue npm Vue adapter

Contributing

This is a monorepo managed with Turborepo and bun.

# Install dependencies
bun install

# Build all packages
bun run build

# Run dev mode
bun run dev

License

MIT

dnd-kit (clauderic/dnd-kit)

draggable
Searching Database…

17.7K ·GitHub
Dnd-kit
What is this?dnd-kit is a modern toolkit for building drag and drop interfaces, designed to be lightweight, performant, accessible and extensible.
Is this a single React library or does it support other frameworks too?It is built in layers: a framework-agnostic core (@dnd-kit/abstract), a DOM implementation (@dnd-kit/dom), and thin adapters for React, Vue, Svelte and SolidJS.
How do I add it to a project?Install the package for your framework (e.g. @dnd-kit/react) and follow the per-framework getting started guide on the docs site.
Do I need any extra input libraries for touch or keyboard support?No, it has built-in sensors for pointer, mouse, touch and keyboard input out of the box.
Does it handle complex layouts like grids and nested containers out of the box?Yes, it explicitly supports lists, grids, multiple containers, nested contexts, variable sized items, virtualized lists and even 2D games.
Is there a ready-made package for sortable lists?Yes, @dnd-kit/dom/sortable is a thin layer built on top of the core specifically for building sortable interfaces.
Can I customize the drag behavior and animations?Yes, you can customize animations, transitions, styles, build your own sensors and collision detection algorithms, and customize key bindings.
Is the library accessible for keyboard and screen reader users?Yes, it includes keyboard support, sensible default ARIA attributes, and customizable screen reader instructions and live regions.
Where can I find full documentation and examples?Full documentation, API reference, guides, and interactive examples are available at dndkit.com.
What are similar projects?Sortable, react-beautiful-dnd, pragmatic-drag-and-drop, react-sortable-hoc, moveable, filepond, floating-ui, react-dnd
Which topics is it in?draggable, sortable, drag-and-drop, accessibility, monorepo, vue, ui, framework, react, npm, frontend, nodejs
Creator
clauderic
Size
11.4 MB
Stars
17.7K
Updated
CommitOct 15Release@dnd-kit/[email protected]Oct 15
Age
5y
Commits · 90 Days