dnd kit – a modern drag and drop toolkit for React
dnd kit Logo

There's a new kit
on the block.

A lightweight, performant, accessible and
extensible drag & drop toolkit for React.

Get Started
dnd kit concepts

A modular toolkit for building
drag & drop interfaces.

Use hooks to turn your components into draggable elements and droppable areas with just a few lines of code. Control every aspect of how your draggable and droppable components should behave.View documentation

Droppable
import React, {useState} from 'react';
import {DndContext} from '@dnd-kit/core';
import {Draggable} from './Draggable';
import {Droppable} from './Droppable';

function Example() {
  const [parent, setParent] = useState(null);
  const draggable = (
    <Draggable id="draggable">
      Go ahead, drag me.
    </Draggable>
  );

  return (
    <DndContext onDragEnd={handleDragEnd}>
      {!parent ? draggable : null}
      <Droppable id="droppable">
        {parent === "droppable" ? draggable : 'Drop here'}
      </Droppable>
    </DndContext>
  );

  function handleDragEnd({over}) {
    setParent(over ? over.id : null);
  }
}

Lightweight.
Packed with features.

  • Built for React

    Exposes a set of hooks to make your components draggable and droppable.

  • Multiple inputs

    Built-in customizable sensors for pointer, mouse, touch and keyboard input, or build your own custom sensors.

  • Accessible

    Keyboard support, customizable screen reader instructions and live regions announcements built-in.

  • Flexible

    Supports a wide range of use cases: lists, grids, multiple containers, nested contexts, games, virtualization, and more.

  • Modular

    Use only the features you need. Built as a monorepo that exposes multiple packages.

  • Extensible

    Provides all the extension points you need to build additional functionality.

  • Zero dependencies

    The core of the library weighs around 10kb, and is built with no external dependencies.

  • Performant

    Built to support silky smooth interactions and animations, even on mobile devices.

  • Customizable

    Customize every little detail, animations, transitions, behaviours, constraints and styles.

Batteries and instructions
included in the box.

There's lots more to learn, and many more features that simply would have taken too long to list on this page. Head over to the detailed documentation to learn how to get started and learn about all of the features.

Documentation

Github