Top 7 Open Source Draggable UI Component Libraries for the Web

Here is a collection of the most popular libraries for building UIs with draggable components in React or vanilla Js.

1. React-beautiful-dnd

Beautiful and accessible drag and drop for lists with React

React-beautiful-dnd is the most popular drag-and-drop library, known for its high performance and powerful API. Build by Atlassian, it appears to have paused active development.

• Repository: https://github.com/atlassian/react-beautiful-dnd
• Demo: https://react-beautiful-dnd.netlify.app/
• Details:
  • ⚖️ License: Apache License, Version 2.0
  • ⭐ GitHub Stars: 28.9k stars
  • 📦 npm package: https://www.npmjs.com/package/react-beautiful-dnd
  • 🗜 Unpacked Size: 1.39 MB
  • Last publish: 4 months ago

2. Draggable

Draggable is a modern drag and drop JavaScript library. Lightweight, modular and accessible

Draggable is a powerful library. It was originally created by Shopify, but it’s now no longer maintained.

• Repository: https://github.com/Shopify/draggable
• Homepage/Demo: https://shopify.github.io/draggable/
• Details:
  • ⚖️ License: MIT
  • ⭐ GitHub Stars: 16.6k stars
  • 📦 npm package: https://www.npmjs.com/package/@shopify/draggable
  • 🗜 Unpacked Size: 2.99 MB
  • Last publish: 2 years ago

3. React-dnd

React DnD is a set of React utilities to help you build complex drag and drop interfaces while keeping your components decoupled. It is a perfect fit for apps like Trello and Storify, where dragging transfers data between different parts of the application, and the components change their appearance and the application state in response to the drag and drop events

• Repository: https://github.com/react-dnd/react-dnd
• Homepage/Demo: https://react-dnd.github.io/react-dnd/about
• Details:
  • ⚖️ License: MIT
  • ⭐ GitHub Stars: 18.6k stars
  • 📦 npm package: https://www.npmjs.com/package/react-dnd
  • 🗜 Unpacked Size: 231 kB
  • Last publish: 8 months ago

4. Interact.js

JavaScript drag and drop, resizing, and multi-touch gestures for modern browsers (and also IE9+)

Interact.js supports inertia and snapping, as well as multi-touch and simultaneous interactions.

• Repository: https://github.com/taye/interact.js
• Homepage/Demo: https://interactjs.io
• Details:
  • ⚖️ License: MIT
  • ⭐ GitHub Stars: 11.3k stars
  • 📦 npm package: https://www.npmjs.com/package/interactjs
  • 🗜 Unpacked Size: 3.42 MB
  • Last publish: 6 months ago

5. React-Draggable

A simple component for making elements draggable

React-Draggable is, as the name suggests, a library for building draggable components in React. Seems like a very solid and simple solution for adding this capability to a React project.

Part of React-Grid-Layout. A great choice if the goal is to build a grid layout UI with drag and drop in React.

• Repository: https://github.com/react-grid-layout/react-draggable
• Demo: http://react-grid-layout.github.io/react-draggable/example/
• Details:
  • ⚖️ License: MIT
  • ⭐ GitHub Stars: 8k stars
  • 📦 npm package: https://www.npmjs.com/package/react-draggable
  • 🗜 Unpacked Size: 279 kB
  • Last publish: 8 months ago
• Resources:
  • The Complete Guide to React Draggable Components
  • React 17 Draggable Components Example – react-draggable Tutorial

6. Draggabilly

Make that shiz draggable

Rad because it supports mouse and touch devices

Draggabilly is a vanilla JS library for implementing drag-n-drop capabilities.

• Repository: https://github.com/desandro/draggabilly
• Homepage: https://draggabilly.desandro.com
• Details:
  • ⚖️ License: MIT
  • ⭐ GitHub Stars: 3.8k stars
  • 📦 npm package: https://www.npmjs.com/package/draggabilly
  • 🗜 Unpacked Size: 83.6 kB
  • Last publish: a year ago

7. React-rnd

A resizable and draggable component for React

React-rnd is a simple and lightweight implementation of DnD in React.

• Repository: https://github.com/bokuweb/react-rnd
• Demo: https://bokuweb.github.io/react-rnd/stories/?path=/story/grid--both
• Details:
  • ⚖️ License: MIT
  • ⭐ GitHub Stars: 3.1k stars
  • 📦 npm package: https://www.npmjs.com/package/react-rnd
  • 🗜 Unpacked Size: 91.1 kB
  • Last publish: 7 days ago

Bonus: Additional Resources

• How To Build a Drag-and-Drop Grid in React
  • A React demo from scratch without 3rd party frameworks.
• How to Create a 2D draggable grid with react-spring: The showdown
• How to Choose the Best React Drag and Drop? Top 15 Free Libraries to Set Up