Want to have a drag and drop component to create draggable and movable elements (e.g. lists, cards, tables, etc) in your React app?
Here is a list of the 10 best drag and drop components that bind mouse drag and touch events to any component or view in your application. Have fun.
Originally Published Aug 14 2020, updated Jan 12 2026
Best Drag And Drop Components For React:
1. Drag and Drop For React – 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.
2. Drag & Drop Toolkit For React – dnd-kit
A modern, lightweight, performant, accessible, and extensible drag & drop toolkit for React.
Features:
- Built for React: exposes hooks such as
useDraggableanduseDroppable, and won’t require you to re-architect your app or create additional wrapper DOM nodes. - Feature packed: customizable collision detection algorithms, multiple activators, draggable overlay, drag handles, auto-scrolling, constraints, and so much more.
- Supports a wide range of use cases: vertical lists, horizontal lists, grids, multiple containers, nested contexts, variable sized list and grids, transformed items, virtualized lists.
- Zero dependencies and modular: the core of the library weighs around 10kb minified and has no external dependencies. It’s built around built-in React state management and context, which keeps the library lean.
- Built-in support for multiple input methods: Pointer, mouse, touch and keyboard sensors.
- Fully customizable & extensible: Customize every detail: animations, transitions, behaviours, styles. Build your own sensors, collision detection algorithms, customize key bindings and so much more.
- Accessibility: Keyboard support, sensible default aria attributes, customizable screen reader instructions and live regions built-in.
- Performance: It was built with performance in mind in order to support silky smooth animations.
3. react-draggable
A simple component for making elements draggable.
4. Resizable and Draggable Component For React – react-rnd
react-rnd is a React component that makes any elements resizable and draggable.
5. @hello-pangea/dnd
Beautiful and accessible drag and drop for lists with React.
Features:
- Beautiful and natural movement of items
- Accessible: powerful keyboard and screen reader support
- Extremely performant
- 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!
6. Drag & Drop List Component – react-movable
An accessible and tiny React component that provides the Drag and drop functionality for your React lists and tables.
- Vertical drag and drop for your lists and tables
- No wrapping divs or additional markup
- Simple single component, no providers or HoCs
- Unopinionated styling, great for CSS in JS too
- Accessible, made for keyboards and screen readers
- Touchable, works on mobile devices
- Full control over the dragged item, it’s a portaled React component
- Autoscrolling when dragging (both for containers and the window)
- Scrolling with the mousewheel / trackpad when dragging
- Works with semantic table rows too
- Smooth animations, can be disabled
- Varying heights of items supported
- Optional lock of the horizontal axis when dragging
- No dependencies, less than 4kB (gzipped)
7. fluid-dnd
A fluid, agnostic and versatile drag and drop library for lists; with support for Vue, React and Svelte. It’s a lightweight tool ~8 Kb (gzip) with no depenencies.
Features:
- Fully customizable.
- Zero dependencies.
- Works with horizontal and vertical list.
- Mouse and touch (mobile, tablet and so on) support.
- Clear documentation and examples.
- Fully tested, typed and reliable.
8. React Component For Animated Draggable Items
This component lets you make a user re-orderable list that animates nicely so that the user can easily move large items.
9. React Nestable & Draggable Component
Drag & drop hierarchical list made as a react component.
10. Snapdrag
An alternative vision of how drag-and-drop should be done in React – simple, intuitive, and performant. With just two hooks and an overlay component you can build rich drag-and-drop interactions – starting from simple squares, ending with scrollable and sortable multi-lists.
Features:
- Minimal, modern API: just two hooks and one overlay component
- Full control: granular event callbacks for every drag stage
- Two-way data flow: draggables and droppables exchange data seamlessly
- Multiple drop targets: supports overlapping and nested zones
- Plugins system: easily extend functionality
- No HTML5 DnD: consistent, reliable behavior across browsers
- Built for performance and extensibility
More Resources:
There’re lots of web & mobile drag and drop libraries out there and you can find more React & React Native resources under our Drag And Drop category.
To learn more about Drag and Drop on modern web & mobile development, here are a few resources available online:
- 10 Best Drag And Drop JavaScript Libraries
- 7 Best Drag And Drop Components To Create Draggable Elements
- Best Advanced Drag And Drop Plugins In JavaScript