Skip to main content
The React adapter for dnd-kit provides React-specific hooks and components built on top of @dnd-kit/dom. It enables you to create drag and drop interfaces with a declarative API that integrates seamlessly with React’s component model.

​
Installation

Install the package using your preferred package manager: 
npm install @dnd-kit/react

​
Quick Start

Create a basic drag and drop interface: 
import {DragDropProvider, useDraggable, useDroppable} from '@dnd-kit/react';
import {useState} from 'react';

function App() {
  const [parent, setParent] = useState(null);

  return (
    <DragDropProvider
      onDragEnd={(event) => {
        if (event.canceled) return;
        setParent(event.operation.target?.id ?? null);
      }}
    >
      {parent == null ? <Draggable /> : null}
      <Droppable>{parent ? <Draggable /> : 'Drop here'}</Droppable>
    </DragDropProvider>
  );
}

function Draggable() {
  const {ref} = useDraggable({id: 'draggable'});
  return <div ref={ref}>Drag me</div>;
}

function Droppable({children}) {
  const {ref} = useDroppable({id: 'droppable'});
  return <div ref={ref}>{children}</div>;
}

​
Core Exports

​
Components

  • DragDropProvider — Wraps your drag and drop interface, manages sensors, plugins, and events
  • DragOverlay — Renders a custom overlay element during drag operations

​
Hooks

​
Type Safety

All hooks and components support custom data types through TypeScript generics: 
interface MyData {
  label: string;
  value: number;
}

const {ref} = useDraggable<MyData>({
  id: 'item',
  data: {label: 'Item 1', value: 42},
});

​
Features

  • Declarative API — Use hooks and components to define drag and drop behavior
  • Fine-grained reactivity — Automatic re-renders only when necessary
  • TypeScript support — Full type safety with generics
  • Server-side rendering — Compatible with Next.js and other SSR frameworks
  • Modular architecture — Import only what you need

​
Next Steps

DragDropProvider

Set up your drag and drop context

useDraggable

Make elements draggable

useDroppable

Create drop targets

useSortable

Build sortable lists

Build docs developers (and LLMs) love

Get started for freeTalk to us