Drag & Drop
Drag-and-drop interactions for sorting, kanban, file uploads, page builders.
React
- ★ dnd-kit — modern, accessible, modular, handles 90% of cases. Default for new React projects.
- ★ Pragmatic drag-and-drop (Atlassian) — extracted from Jira; fastest, most accessible. Framework-agnostic, ergonomic React adapter.
- react-beautiful-dnd — mature, but maintenance is winding down — Atlassian recommends Pragmatic dnd as the successor.
- react-dnd — venerable, very flexible, lower-level. Choose if dnd-kit doesn't fit.
- Motion has a
<Reorder>component for simple list reordering — often enough.
Framework-agnostic
- SortableJS — pure JS sortable lists; ports for React, Vue, Svelte, Angular.
- Pragmatic drag-and-drop — works with any framework.
- Interact.js — full pointer / drag / gesture toolkit.
File upload drag-drop
- react-dropzone — focused on file drops.
- Uppy — full upload UI (see File Uploads).
Pick this if…
- Default React DnD: dnd-kit.
- Maximum perf and a11y: Pragmatic drag-and-drop.
- Just need list reordering: Motion's
<Reorder>. - Vue / Svelte / multi-framework: SortableJS or Pragmatic dnd.