dnd-kit Architecture and Accessibility-First Design

react-beautiful-dnd was the go-to drag-and-drop library for React, but it was officially archived in 2023 and is no longer maintained. The community quickly rallied around dnd-kit as the recommended replacement, which was designed from scratch with modern React and accessibility in mind.

dnd-kit is built around three key architectural concepts: DndContext manages all drag state and coordinates between draggable and droppable elements, sensors abstract input methods so the same drag logic works for mouse, touch, and keyboard, and modifiers let you snap, restrict, or transform the drag movement.

dnd-kit ships with three built-in sensors. PointerSensor handles both mouse and touch input through the unified Pointer Events API. KeyboardSensor enables full keyboard-only drag and drop. TouchSensor handles legacy touch events. You configure sensors via the sensors prop on DndContext.

dnd-kit has built-in keyboard navigation for accessibility. Users press Space to pick up an item, Arrow keys to move it to a new position, Space again to drop it, and Escape to cancel the drag without making changes. These interactions are announced to screen readers automatically.

dnd-kit automatically applies aria-grabbed to draggable items to indicate their grab state to assistive technologies. It uses aria-dropeffect on droppable zones to communicate what will happen when an item is dropped. A live region announces status updates so screen reader users hear confirmations like "Item picked up" or "Item dropped successfully."

dnd-kit is designed to be tree-shakable, meaning you only import the pieces you actually use. There is no bundled CSS — all visual styling is your responsibility, giving you full control over the appearance of draggable elements, overlays, and drop zones. This keeps bundle sizes minimal.

DndContext provides three primary event callbacks for tracking the drag lifecycle. onDragStart fires when the user begins dragging and receives the active item ID. onDragOver fires continuously as the dragged item moves over droppable targets. onDragEnd fires when the drag completes, giving you the active item and the drop target.

You pass an array of sensor configurations to DndContext using the sensors prop combined with the useSensors hook. Each sensor is initialized with useSensor(SensorClass, options). For example, you can configure PointerSensor with a minimum drag distance to prevent accidental drags when clicking.

Modifiers transform the drag coordinates before they are applied to the dragged element. restrictToVerticalAxis locks movement to a single direction. restrictToParentElement keeps the dragged item within its container. snapCenterToCursor snaps the element so its center tracks the cursor. You compose multiple modifiers in an array.

Every draggable and droppable element needs a unique string or number ID. These IDs are the primary way dnd-kit tracks what is being dragged and where it is being dropped. In onDragEnd, you read event.active.id for the dragged item and event.over?.id for the drop target to update your application state.

Unlike many DnD libraries that treat keyboard support as an afterthought, dnd-kit puts accessibility at the core of its design. The KeyboardSensor is a first-class citizen with the same capabilities as PointerSensor. All ARIA attributes are managed automatically, and custom announcements can be configured via the accessibility prop on DndContext.

Which key does dnd-kit use to cancel an in-progress keyboard drag without making changes?

dnd-kit replaced the archived react-beautiful-dnd as the community standard for React drag and drop. Its architecture centers on DndContext for state, sensors for input abstraction (Pointer, Keyboard, Touch), and modifiers for movement constraints. Accessibility is first-class: ARIA attributes, live region announcements, and full keyboard navigation are built in.