Interaction

dnd-kit

Modern, accessible drag and drop.

Docs

Live demodnd-kit

Design tokens#1

Color system#2

Typography scale#3

Motion guidelines#4

Iconography#5

dnd-kit is the current default for drag-and-drop. Fully accessible (keyboard + screen reader), zero dependencies, composable sensors, and works for sortable lists, kanban, nested trees.

Install

npm i @dnd-kit/core @dnd-kit/sortable @dnd-kit/utilities

Snippet

import { DndContext, closestCenter } from "@dnd-kit/core";
import { SortableContext, useSortable, arrayMove } from "@dnd-kit/sortable";

function Item({ id }: { id: string }) {
  const { attributes, listeners, setNodeRef, transform } = useSortable({ id });
  return <div ref={setNodeRef} style={{ transform: CSS.Transform.toString(transform) }} {...attributes} {...listeners} />;
}

<DndContext collisionDetection={closestCenter} onDragEnd={(e) => {
  const { active, over } = e;
  if (over && active.id !== over.id) {
    setItems((items) => arrayMove(items, items.indexOf(active.id), items.indexOf(over.id)));
  }
}}>
  <SortableContext items={items} strategy={verticalListSortingStrategy}>
    {items.map((id) => <Item key={id} id={id} />)}
  </SortableContext>
</DndContext>