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
Vue
Svelte
SolidJS
Vanilla JS
Install the React adapter along with its peer dependencies. npm install @dnd-kit/react @dnd-kit/dom @dnd-kit/abstract
Peer dependencies The React adapter requires React 18.0.0 or higher: { "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.
Install the Vue adapter along with its dependencies. npm install @dnd-kit/vue @dnd-kit/dom @dnd-kit/abstract
Install the Svelte adapter along with its dependencies. npm install @dnd-kit/svelte @dnd-kit/dom @dnd-kit/abstract
Install the SolidJS adapter along with its dependencies. npm install @dnd-kit/solid @dnd-kit/dom @dnd-kit/abstract
Install the core DOM package for framework-agnostic usage. npm install @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:
import { useSortable } from '@dnd-kit/react/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 install @dnd-kit/collision
This package provides algorithms like:
closestCenter - Finds the droppable closest to the center of the draggableclosestCorners - Measures distance to all four cornersrectangleIntersection - Detects overlapping rectanglesdirectionBiased - Optimized for sortable lists
Helpers Utility functions for common operations:
npm install @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 install @dnd-kit/geometry
Package exports Each framework adapter provides multiple entry points for tree-shaking optimization:
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: { "exports" : { "." : { "types" : "./index.d.ts" , "import" : "./index.js" , "require" : "./index.cjs" }, "./sortable" : { "types" : "./sortable.d.ts" , "import" : "./sortable.js" , "require" : "./sortable.cjs" } } }
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:
{ "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:
'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:
import { DragDropProvider } from '@dnd-kit/react' ; function App () { return ( < DragDropProvider > < div > dnd-kit installed successfully! </ div > </ DragDropProvider > ); } export default App ;
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