DEV Community

Play Button Pause Button
Brian Neville-O'Neill
Brian Neville-O'Neill

Posted on

Build a beautiful, draggable kanban board with react-beautiful-dnd

In this tutorial, we are going to see how to create a beautiful kanban board with simple drag and drop features with react-beautiful-dnd.

Click here for the CodeSandbox.

Drag and drop UI has become an integral part of most modern applications. It provides richness in UI without comprising the UX. There are many use cases of drag and drop UI. The most common ones are:

  • Using drag and drop in the browser to upload files
  • Moving items between multiple lists
  • Rearranging images or assets

Click here for the related blog post on drag and drop in React.

LogRocket on YouTube 🎬


If you enjoy in-depth video tutorials on frontend topics, check out LogRocket's YouTube channel. Make sure to give us a like if you find the video helpful and subscribe to stay updated on when we post new videos.

Top comments (3)

christopherhbutler profile image
Christopher Harold Butler • Edited

Really great article! I would love to see support added to track the index of an item within a column so that you can persist order of items within each column. Any idea how to go about that?

seankaat profile image

Thanks for making the video (seems simple enough). Personally, I would enjoy also separating the components into a couple of separate files to see how it might fit into a larger application.

adammymilan profile image

I use Restyaboard for this Kanban approach. It’s a productivity and management tool specifically built around a Kanban-style workflow. Great free tool to use and I love it!