dnd_kit documentation

dnd_kit is one drag-and-drop engine for Flutter and the web. A framework-neutral core does the drag math; thin adapters render it on each platform — so the same API moves cards on Flutter and in the browser.

Key features

•One engine, two adapters — identical collision, modifier, and sortable math on Flutter and the web.
•Batteries included — draggable, droppable, drag overlay, sortable lists, and multi-container Kanban presets.
•Accessible by default — keyboard dragging and live-region announcements are built in, not bolted on.
•SSR-safe on the web — components pre-render on the server and hydrate without DOM access at import time.

Choose a package

Pick the package for your platform, then read on:

dnd_kit_flutter ↗ Flutter apps — widgets, sensors, overlays, sortable. dnd_kit_jaspr ↗ Jaspr (Dart web) apps — the web adapter, no Flutter SDK. dnd_kit ↗ The shared engine — custom adapters and drag math. Installation Add a package and start dragging.

Core concepts

The essential building blocks, smallest first:

Quickstart Wire a draggable and a droppable in three steps. Draggable Make any widget or element pick-up-able. Droppable Define the targets a draggable can land on. Sortable lists Reorder a list with the sortable preset.

Next Installation →