react-beautiful-dnd logo


Beautiful and accessible drag and drop for lists with React (by Atlassian)
+ 1

What is react-beautiful-dnd?

There are a lot of libraries out there that allow for drag and drop interactions within React. Most notable of these is the amazing react-dnd. It does an incredible job at providing a great set of drag and drop primitives which work especially well with the wildly inconsistent html5 drag and drop feature. react-beautiful-dnd is a higher level abstraction specifically built for vertical and horizontal lists. Within that subset of functionality react-beautiful-dnd offers a powerful, natural and beautiful drag and drop experience. However, it does not provide the breadth of functionality offered by react-dnd.
react-beautiful-dnd is a tool in the JavaScript Framework Components category of a tech stack.
react-beautiful-dnd is an open source tool with 28.7K GitHub stars and 2.3K GitHub forks. Here’s a link to react-beautiful-dnd's open source repository on GitHub

Who uses react-beautiful-dnd?

6 companies reportedly use react-beautiful-dnd in their tech stacks, including Captiv8 Javascript, Head, and Motu Client.

56 developers on StackShare have stated that they use react-beautiful-dnd.

react-beautiful-dnd Integrations

react-beautiful-dnd's Features

  • Beautiful, natural movement of items
  • Clean and powerful api which is simple to get started with
  • Plays extremely well with standard browser interactions
  • Unopinionated styling
  • No creation of additional wrapper dom nodes - flexbox and focus management friendly!
  • Accessible ♿️🚀

react-beautiful-dnd Alternatives & Comparisons

What are some alternatives to react-beautiful-dnd?
React Router
React Router is a complete routing solution designed specifically for React.js. It painlessly synchronizes the components of your application with the URL, with first-class support for nesting, transitions, and server side rendering.
Visual primitives for the component age. Use the best bits of ES6 and CSS to style your apps without stress 💅
It is an open source tool for developing UI components in isolation for React, Vue, and Angular. It makes building stunning UIs organized and efficient.
Ant Design
An enterprise-class UI design language and React-based implementation. Graceful UI components out of the box, base on React Component. A npm + webpack + babel + dora + dva development framework.
Angular CLI
A command-line interface tool that you use to initialize, develop, scaffold, and maintain Angular applications. You can use the tool directly in a command shell, or indirectly through an interactive UI such as Angular Console.
See all alternatives

react-beautiful-dnd's Followers
83 developers follow react-beautiful-dnd to keep up with related blogs and decisions.