> ## Documentation Index > Fetch the complete documentation index at: https://mintlify.com/clauderic/dnd-kit/llms.txt > Use this file to discover all available pages before exploring further. # Introduction > A modern, lightweight, performant, accessible and extensible drag and drop toolkit for the web @dnd-kit Hero @dnd-kit Hero ## Welcome to dnd-kit dnd-kit is a modern, lightweight, performant, accessible and extensible drag and drop toolkit for the web. It's built with a framework-agnostic core and provides adapters for popular frameworks like React, Vue, Svelte, and SolidJS. Get up and running with your first drag and drop interface in minutes Install dnd-kit in your project with your preferred package manager Explore the complete API documentation and type definitions Browse interactive examples and learn best practices ## Why dnd-kit? dnd-kit stands out from other drag and drop libraries with its unique architecture and feature set: ### 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. This means you can use the same drag and drop logic across different frameworks. ```tsx React theme={null} import {DragDropProvider, useDraggable} from '@dnd-kit/react'; function App() { return ( ); } ``` ```vue Vue theme={null} ``` ```svelte Svelte theme={null} ``` ### Wide range of use cases Supports a diverse set of drag and drop patterns: * Sortable lists (vertical and horizontal) * Grid layouts with variable sized items * Multiple containers and nested contexts * Virtualized lists for performance * 2D games and canvas applications * Custom interactions and behaviors ### Built-in accessibility Accessibility is a first-class citizen in dnd-kit: Full keyboard navigation support out of the box. Users can activate drag operations with Space or Enter, move items with arrow keys, and cancel with Escape. Sensible default ARIA attributes and customizable screen reader instructions ensure users with assistive technologies can understand and interact with your drag and drop interfaces. Built-in ARIA live regions announce drag and drop operations to screen reader users in real-time. ### Performance focused Built with performance in mind to support silky smooth animations even with large lists: * Minimal DOM updates during drag operations * Efficient collision detection algorithms * Support for virtualized lists * Optimized re-rendering strategies * GPU-accelerated transforms ### Fully customizable Customize every aspect of the drag and drop experience: Pointer, mouse, touch, and keyboard sensors with customizable activation constraints Snap to grid, restrict to axis, apply constraints, and create custom modifiers Multiple algorithms included, or build your own custom collision detection Full control over transitions, animations, and visual feedback Extend functionality with plugins like Debug, Feedback, and custom implementations Complete control over styles, no CSS required, bring your own styling solution ## Architecture overview Understanding dnd-kit's layered architecture helps you make the most of the library: ```mermaid theme={null} graph TB A[@dnd-kit/react] --> B[@dnd-kit/dom] C[@dnd-kit/vue] --> B D[@dnd-kit/svelte] --> B E[@dnd-kit/solid] --> B B --> F[@dnd-kit/abstract] B --> G[@dnd-kit/collision] B --> H[@dnd-kit/geometry] F --> I[@dnd-kit/state] F --> J[@dnd-kit/helpers] ``` Framework-agnostic core that defines the fundamental drag and drop concepts, interfaces, and base classes. DOM-specific implementation that handles browser events, sensors, and rendering for web applications. Thin adapters for React, Vue, Svelte, and SolidJS that provide framework-specific hooks, components, and patterns. ## Core concepts Before diving into the code, familiarize yourself with these core concepts: ### Draggable A **draggable** is any element that can be picked up and moved. You create draggables using the `useDraggable` hook (or equivalent in your framework). ```tsx theme={null} const {ref, isDragging} = useDraggable({ id: 'unique-id', element: elementRef, }); ``` ### Droppable A **droppable** is a designated area where draggables can be dropped. Create droppables using the `useDroppable` hook. ```tsx theme={null} const {ref, isDropTarget} = useDroppable({ id: 'droppable-area', element: elementRef, }); ``` ### DragDropProvider The **DragDropProvider** wraps your drag and drop interface and manages the drag operation state, event handling, and coordination between draggables and droppables. ```tsx theme={null} console.log('Drag started', event)} onDragEnd={(event) => console.log('Drag ended', event)} > {/* Your draggables and droppables */} ``` ### Sensors Sensors detect input methods (pointer, mouse, touch, keyboard) and initiate drag operations. You can configure which sensors to use and their activation constraints. ### Modifiers Modifiers transform the position of draggable elements during a drag operation. Common modifiers include restricting movement to an axis or snapping to a grid. ## Packages Framework-agnostic core package with fundamental drag and drop primitives DOM-specific implementation with sensors, collision detection, and rendering React hooks and components for building drag and drop interfaces Vue composables and components for drag and drop functionality Svelte stores and components for drag and drop interactions SolidJS primitives and components for drag and drop Collision detection algorithms for determining drop targets Geometry utilities for calculating positions, distances, and intersections Reactive state management utilities Helper functions for common drag and drop operations ## Next steps Ready to build your first drag and drop interface? Choose your framework and install the necessary packages Build a working drag and drop example in minutes