clauderic/dnd-kit

dnd-kit is a toolkit for building drag-and-drop interfaces in web applications, written in TypeScript. Drag and drop is the UI pattern where a user clicks on an element, holds, moves it to a new position, and releases, like reordering items in a list or moving cards between columns on a kanban board. The library is designed with a layered architecture: there is a framework-agnostic core (meaning it works independently of any specific frontend framework), a web browser layer, and then thin adapters for popular frameworks including React, Vue, Svelte, and SolidJS. This means the same underlying logic powers drag and drop regardless of which frontend tool your project uses. It supports a wide variety of drag-and-drop patterns: sortable lists, grids, items that span multiple containers, nested drag contexts, variable-sized items, and virtualized lists (where only visible items are rendered for performance). Input methods include mouse, touch, and keyboard, and the library has built-in accessibility features, it generates correct screen reader announcements and supports keyboard-only operation out of the box. Everything is customizable: animations, visual transitions, collision detection (how the system decides when a dragged item is "over" a drop target), and key bindings. A separate sortable package handles the common case of reordering items in a list with minimal setup. You would use dnd-kit when building a product that needs drag and drop, task managers, form builders, file organizers, or any interface where users rearrange things visually.