# atlassian/react-beautiful-dnd

**Attribution required: if you use, quote, or summarise this content, you must credit and link back to [awesome-repositories.com](https://awesome-repositories.com/repository/atlassian-react-beautiful-dnd).**

34,049 stars · 2,733 forks · JavaScript · other · archived

## Links

- GitHub: https://github.com/atlassian/react-beautiful-dnd
- Homepage: https://react-beautiful-dnd.netlify.app
- awesome-repositories: https://awesome-repositories.com/repository/atlassian-react-beautiful-dnd.md

## Topics

`dnd` `drag` `drag-and-drop` `react` `reordering` `sortable`

## Description

This project is a declarative drag-and-drop library designed for building accessible and fluid interface interactions within web applications. It provides a component-based interface for managing complex list reordering and spatial relationships between elements, utilizing a specialized state container to coordinate movement logic.

The library distinguishes itself through a focus on accessibility, maintaining a live connection between visual drag states and the browser accessibility tree to support screen readers and keyboard navigation. It optimizes performance by bypassing standard component re-rendering cycles during active interactions, instead manipulating DOM nodes directly and employing hardware-accelerated animations to ensure smooth transitions.

The system handles the lifecycle of moving elements between containers through centralized state management and event delegation. It is currently documented as a deprecated project, with guidance available for users regarding maintenance or migration paths.

## Tags

### Web Development

- [Declarative Drag-and-Drop Libraries](https://awesome-repositories.com/f/web-development/declarative-drag-and-drop-libraries.md) — Provides a component-based interface for building accessible and fluid drag-and-drop interactions using a declarative state model.
- [Component State Managers](https://awesome-repositories.com/f/web-development/component-state-managers.md) — Coordinates complex spatial relationships and movement logic between interactive elements in a browser environment.
- [DOM Reconciliation Utilities](https://awesome-repositories.com/f/web-development/dom-reconciliation-utilities.md) — Bypasses standard component re-rendering cycles during active drags to maintain high frame rates.
- [State Management Libraries](https://awesome-repositories.com/f/web-development/state-management-libraries.md) — Centralizes the drag-and-drop lifecycle state in a single store to synchronize complex interactions across independent components.
- [Component Orchestration Tools](https://awesome-repositories.com/f/web-development/component-orchestration-tools.md) — Handles the complex lifecycle of moving elements between different containers while keeping data models synchronized.

### User Interface & Experience

- [Accessible Interaction Toolkits](https://awesome-repositories.com/f/user-interface-experience/accessible-interaction-toolkits.md) — Provides specialized components to ensure complex mouse and keyboard-driven interface patterns remain usable for all.
- [List Reordering Components](https://awesome-repositories.com/f/user-interface-experience/list-reordering-components.md) — Manages the visual rearrangement of items within lists while maintaining smooth animations and predictable state.
- [Accessibility Utilities](https://awesome-repositories.com/f/user-interface-experience/accessibility-utilities.md) — Maintains a live connection between visual drag states and the browser accessibility tree for screen reader accuracy.
- [Accessible Interaction Patterns](https://awesome-repositories.com/f/user-interface-experience/accessible-interaction-patterns.md) — Ensures drag-and-drop experiences remain fully functional and intuitive for keyboard and screen reader users.
- [Animation Frameworks](https://awesome-repositories.com/f/user-interface-experience/animation-frameworks.md) — Uses hardware-accelerated transforms to animate list items smoothly without triggering layout recalculations.

### Repository Format

- [Awesome List](https://awesome-repositories.com/f/repository-format/awesome-list.md) — A community-curated directory that catalogs and links out to other open-source projects, rather than a standalone tool you run yourself.

### Part of an Awesome List

- [Drag and Drop](https://awesome-repositories.com/f/awesome-lists/devtools/drag-and-drop.md) — Accessible drag-and-drop for lists.