react beautiful dnd logo

react-beautiful-dnd (rbd)

Beautiful and accessible drag and drop for lists with React

CircleCI branch npm

quote application example

Play with this example if you want!

Core characteristics

Get started ๐Ÿ‘ฉโ€๐Ÿซ

We have created a free course on ๐Ÿฅš to help you get started with react-beautiful-dnd as quickly as possible.


Currently supported feature set โœ…

Motivation ๐Ÿค”

react-beautiful-dnd exists to create beautiful drag and drop for lists that anyone can use - even people who cannot see. For a good overview of the history and motivations of the project you can take a look at these external resources:

Not for everyone โœŒ๏ธ

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 lists (vertical, horizontal, movement between lists, nested lists and so on). 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. So react-beautiful-dnd might not be for you depending on what your use case is.

Documentation ๐Ÿ“–

About ๐Ÿ‘‹

Sensors ๐Ÿ”‰

The ways in which somebody can start and control a drag

API ๐Ÿ‹๏ธโ€


Guides ๐Ÿ—บ

Patterns ๐Ÿ‘ทโ€

Support ๐Ÿ‘ฉโ€โš•๏ธ

Read this in other languages ๐ŸŒŽ

Author โœ๏ธ

Alex Reardon @alexandereardon

Collaborators ๐Ÿค