explaingit

atlassian/react-beautiful-dnd

★ 34,002JavaScriptAudience · developerComplexity · 2/5QuietSetup · easy

TLDR

A React library for building smooth, accessible drag-and-drop interfaces for lists and boards. Handles animations, keyboard navigation, and screen reader support.

Mindmap

mindmap
  root((repo))
    What it does
      Drag and drop lists
      Reorder items smoothly
      Multi-list support
    Core components
      DragDropContext
      Droppable zones
      Draggable items
    Key features
      Keyboard accessible
      Screen reader support
      Touch mobile support
       60fps animations
    Use cases
      Task boards
      Kanban workflows
      Priority queues
    Tech stack
      React
      JavaScript
      npm

Things people build with this

USE CASE 1

Build a Trello-like task board where users drag cards between columns to organize work.

USE CASE 2

Create a reorderable priority queue where users drag items up or down to change importance.

USE CASE 3

Build a Kanban workflow interface with multiple swimlanes that users can drag tasks between.

USE CASE 4

Make a mobile-friendly list where users can reorder items by dragging on touch devices.

Tech stack

ReactJavaScript

Getting it running

Difficulty · easy Time to first run · 5min
License could not be detected automatically. Check the repository's LICENSE file before use.

In plain English

react-beautiful-dnd is a React library created by Atlassian (the company behind Jira and Trello) for building drag-and-drop interfaces specifically for lists. It was designed to solve a specific problem: most drag-and-drop libraries are technically functional but feel clunky and mechanical. This library focused on making the dragging experience feel natural and fluid, items gently move out of the way as you drag, and animations give users clear feedback about where things will land. The library is built around three core components. A DragDropContext wraps whatever part of your app needs drag-and-drop capability. Inside that, Droppable marks areas where items can be dropped, and Draggable marks individual items that can be picked up and moved. When a drag ends, a callback tells you what moved from where to where, so you can update your data accordingly. This declarative approach fits naturally into React's component model. A standout commitment of the project is accessibility. It is fully operable with a keyboard (for users who cannot use a mouse) and includes screen reader announcements that describe what is happening in plain language, making it usable for people with visual impairments, a feature most drag-and-drop libraries ignore entirely. Touch support for mobile and tablet devices was also a first-class concern. You would use react-beautiful-dnd for building task boards like Trello (drag cards between columns), reorderable lists, priority queues, Kanban workflows, or any interface where the user needs to visually reorganize items. It supports both vertical and horizontal lists, dragging between separate lists, and virtual lists with tens of thousands of items at 60 frames per second. Important note: this project has been archived and deprecated. Atlassian's current actively maintained alternative is Pragmatic drag and drop. The library is written in JavaScript, designed for React, and distributed via npm.

Copy-paste prompts

Prompt 1
Show me how to set up react-beautiful-dnd with a simple two-column task board where I can drag cards between columns.
Prompt 2
How do I make a keyboard-accessible drag-and-drop list using react-beautiful-dnd that works with screen readers?
Prompt 3
I want to build a Trello clone with react-beautiful-dnd. Walk me through the DragDropContext, Droppable, and Draggable components.
Prompt 4
How do I handle the onDragEnd callback in react-beautiful-dnd to update my data when items are reordered?
Prompt 5
Can react-beautiful-dnd handle dragging between multiple lists, and how do I prevent items from being dropped in certain zones?
Open on GitHub → Explain another repo

Generated 2026-05-18 · Model: sonnet-4-6 · Verify against the repo before relying on details.