Installation

Install dnd-kit packages for your preferred framework and package manager

Choose your framework

dnd-kit provides framework-specific adapters for React, Vue, Svelte, SolidJS, and vanilla JavaScript. Choose the installation instructions for your framework:

React

Install the React adapter along with its peer dependencies.

npm

npm install @dnd-kit/react @dnd-kit/dom @dnd-kit/abstract

yarn add @dnd-kit/react @dnd-kit/dom @dnd-kit/abstract

pnpm add @dnd-kit/react @dnd-kit/dom @dnd-kit/abstract

bun add @dnd-kit/react @dnd-kit/dom @dnd-kit/abstract

Peer dependencies

The React adapter requires React 18.0.0 or higher:

package.json

{
  "dependencies": {
    "react": "^18.0.0 || ^19.0.0",
    "react-dom": "^18.0.0 || ^19.0.0"
  }
}

dnd-kit is compatible with both React 18 and the latest React 19.

Vue

Install the Vue adapter along with its dependencies.

npm

npm install @dnd-kit/vue @dnd-kit/dom @dnd-kit/abstract

yarn add @dnd-kit/vue @dnd-kit/dom @dnd-kit/abstract

pnpm add @dnd-kit/vue @dnd-kit/dom @dnd-kit/abstract

bun add @dnd-kit/vue @dnd-kit/dom @dnd-kit/abstract

Svelte

Install the Svelte adapter along with its dependencies.

npm

npm install @dnd-kit/svelte @dnd-kit/dom @dnd-kit/abstract

yarn add @dnd-kit/svelte @dnd-kit/dom @dnd-kit/abstract

pnpm add @dnd-kit/svelte @dnd-kit/dom @dnd-kit/abstract

bun add @dnd-kit/svelte @dnd-kit/dom @dnd-kit/abstract

SolidJS

Install the SolidJS adapter along with its dependencies.

npm

npm install @dnd-kit/solid @dnd-kit/dom @dnd-kit/abstract

yarn add @dnd-kit/solid @dnd-kit/dom @dnd-kit/abstract

pnpm add @dnd-kit/solid @dnd-kit/dom @dnd-kit/abstract

bun add @dnd-kit/solid @dnd-kit/dom @dnd-kit/abstract

Vanilla JS

Install the core DOM package for framework-agnostic usage.

npm

npm install @dnd-kit/dom @dnd-kit/abstract

yarn add @dnd-kit/dom @dnd-kit/abstract

pnpm add @dnd-kit/dom @dnd-kit/abstract

bun add @dnd-kit/dom @dnd-kit/abstract

Optional packages

Depending on your use case, you may want to install additional packages:

Sortable

If you’re building sortable lists, the sortable functionality is included in the framework adapters:

React

import {useSortable} from '@dnd-kit/react/sortable';

import {useSortable} from '@dnd-kit/vue/sortable';

import {sortable} from '@dnd-kit/svelte/sortable';

The sortable module is included in the framework adapters—no additional installation required.

Collision detection

Advanced collision detection algorithms are available in the @dnd-kit/collision package:

npm

npm install @dnd-kit/collision

yarn add @dnd-kit/collision

pnpm add @dnd-kit/collision

bun add @dnd-kit/collision

This package provides algorithms like:

• closestCenter - Finds the droppable closest to the center of the draggable
• closestCorners - Measures distance to all four corners
• rectangleIntersection - Detects overlapping rectangles
• directionBiased - Optimized for sortable lists

Helpers

Utility functions for common operations:

npm

npm install @dnd-kit/helpers

yarn add @dnd-kit/helpers

pnpm add @dnd-kit/helpers

bun add @dnd-kit/helpers

Provides helpers like move() for reordering arrays:

import {move} from '@dnd-kit/helpers';

const newItems = move(items, dragEvent);

Geometry

Geometry utilities for calculating positions and distances:

npm

npm install @dnd-kit/geometry

yarn add @dnd-kit/geometry

pnpm add @dnd-kit/geometry

bun add @dnd-kit/geometry

Package exports

Each framework adapter provides multiple entry points for tree-shaking optimization:

React

The React package exports are organized by feature:

// Core drag and drop
import {
  DragDropProvider,
  useDraggable,
  useDroppable,
  DragOverlay,
  useDragDropManager,
  useDragDropMonitor,
} from '@dnd-kit/react';

// Sortable
import {useSortable} from '@dnd-kit/react/sortable';

// Utilities
import {currentValue} from '@dnd-kit/react/utilities';

// React-specific hooks
import {
  useComputed,
  useConstant,
  useLatest,
} from '@dnd-kit/react/hooks';

All exports are available in both ESM and CommonJS formats:

package.json

{
  "exports": {
    ".": {
      "types": "./index.d.ts",
      "import": "./index.js",
      "require": "./index.cjs"
    },
    "./sortable": {
      "types": "./sortable.d.ts",
      "import": "./sortable.js",
      "require": "./sortable.cjs"
    }
  }
}

DOM

The DOM package provides the core implementation:

import {
  DragDropManager,
  Draggable,
  Droppable,
  PointerSensor,
  KeyboardSensor,
} from '@dnd-kit/dom';

// Sortable utilities
import {Sortable} from '@dnd-kit/dom/sortable';

// Plugins
import {Debug} from '@dnd-kit/dom/plugins/debug';
import {Feedback} from '@dnd-kit/dom/plugins/feedback';

TypeScript support

All dnd-kit packages are written in TypeScript and include type definitions:

import type {
  UseDraggableInput,
  UseDroppableInput,
  DragStartEvent,
  DragEndEvent,
  DragOverEvent,
} from '@dnd-kit/react';

function handleDragEnd(event: DragEndEvent) {
  const {source, target} = event.operation;
  // TypeScript knows the shape of event
}

No additional @types packages needed—types are included in each package.

Version compatibility

All dnd-kit packages follow semantic versioning. When installing multiple packages, ensure they’re on compatible versions:

package.json

{
  "dependencies": {
    "@dnd-kit/react": "^0.3.2",
    "@dnd-kit/dom": "^0.3.2",
    "@dnd-kit/abstract": "^0.3.2",
    "@dnd-kit/collision": "^0.3.2",
    "@dnd-kit/helpers": "^0.3.2"
  }
}

Always use the same minor version across all @dnd-kit packages to avoid compatibility issues.

Bundler configuration

Next.js

dnd-kit works seamlessly with Next.js 13+ and the App Router. All components are marked with 'use client' where needed:

app/page.tsx

'use client';

import {DragDropProvider, useDraggable} from '@dnd-kit/react';

export default function Page() {
  return (
    <DragDropProvider>
      {/* Your drag and drop interface */}
    </DragDropProvider>
  );
}

Vite

No special configuration needed for Vite. The library works out of the box:

import {DragDropProvider} from '@dnd-kit/react';

function App() {
  return <DragDropProvider>{/* ... */}</DragDropProvider>;
}

Webpack

For Webpack 5, ensure you’re using the latest version. No additional configuration required.

Verify installation

Create a simple test to verify your installation:

React

import {DragDropProvider} from '@dnd-kit/react';

function App() {
  return (
    <DragDropProvider>
      <div>dnd-kit installed successfully!</div>
    </DragDropProvider>
  );
}

export default App;

<script setup>
import {DragDropProvider} from '@dnd-kit/vue';
</script>

<template>
  <DragDropProvider>
    <div>dnd-kit installed successfully!</div>
  </DragDropProvider>
</template>

If this renders without errors, you’re ready to go!

Next steps

Quick start guide

Build your first drag and drop interface with our step-by-step guide