Back to Dnd Kit

README

README.md

latest5.3 KB
Original Source
<p align="center"> <a href="https://dndkit.com"> </a> </p> <p align="center"> A modern, lightweight, performant, accessible and extensible drag and drop toolkit for the web </p>

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.
<h2 align="left">Getting started</h2> <p> Choose your preferred framework to get started: </p> <table width="100%" cellpadding="32"> <tr> <td width="50%" valign="top">

<strong><a href="https://dndkit.com/quickstart">Vanilla</a></strong>

Build drag and drop interfaces using plain JavaScript

</td> <td width="50%" valign="top">

<strong><a href="https://dndkit.com/react/quickstart">React</a></strong>

Build drag and drop interfaces using React components and hooks

</td> </tr> <tr> <td width="50%" valign="top">

<strong><a href="https://dndkit.com/vue/quickstart">Vue</a></strong>

Build drag and drop interfaces using Vue composables and components

</td> <td width="50%" valign="top">

<strong><a href="https://dndkit.com/svelte/quickstart">Svelte</a></strong>

Build drag and drop interfaces using Svelte primitives and components

</td> </tr> <tr> <td width="50%" valign="top">

<strong><a href="https://dndkit.com/solid/quickstart">Solid</a></strong>

Build drag and drop interfaces using SolidJS hooks and components

</td> <td width="50%" valign="top"> </td> </tr> </table>

Documentation

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

Packages

PackageVersionDescription
@dnd-kit/abstractAbstract core
@dnd-kit/collisionCollision detection
@dnd-kit/domFramework-agnostic DOM layer
@dnd-kit/geometryGeometry utilities
@dnd-kit/helpersHelper functions
@dnd-kit/reactReact adapter
@dnd-kit/solidSolidJS adapter
@dnd-kit/stateReactive state management
@dnd-kit/svelteSvelte adapter
@dnd-kit/vueVue adapter

Contributing

This is a monorepo managed with Turborepo and bun.

bash
# Install dependencies
bun install

# Build all packages
bun run build

# Run dev mode
bun run dev

License

MIT