DEV Community

loading...
Play Button Pause Button

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

Brian Neville-O'Neill
Director content @LogRocket. I didn't write the post you just read. To find out who did, click the link directly above my name.
・1 min read

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.


Discussion (3)

Collapse
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?

Collapse
seankaat profile image
SeanKaat

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.

Collapse
adammymilan profile image
adammymilan

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!