10 Best Drag And Drop Components For React (2025 Update)

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 July 23 2025

Best Drag And Drop Components For React:

1. Drag and Drop For React – React DnD

A set of React higher-order components to help you build complex drag and drop interfaces while keeping your components decoupled.

2. dnd-kit

A modern, lightweight, performant, accessible, and extensible drag & drop toolkit for React.

Features:

• Built for React: exposes hooks such as useDraggable and useDroppable, 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.

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-native-reanimated-dnd

A drag-and-drop library that finally works on React Native.

Features:

• High Performance – Built with Reanimated 3 for buttery-smooth 60fps animations
• Full RN Fabric Support – Works seamlessly with both New Architecture and Old Architecture
• Expo Compatible – Zero configuration needed, works out of the box with Expo
• Tiny Bundle Size – Only 70kb unpacked size, won’t bloat your app
• Flexible API – From simple drag-and-drop to complex sortable lists
• React Native First – Designed specifically for mobile, not ported from web
• TypeScript Ready – Full type safety with comprehensive definitions
• Infinitely Customizable – Every animation, behavior, and style is configurable
• Complete Component Suite – Draggable, Droppable, Sortable, and more
• Smart Collision Detection – Multiple algorithms (center, intersect, contain)
• Vertical & Horizontal Sortable Lists – Drag and drop to sort lists in any direction with automatic scrolling
• FlatList Performance – Optional FlatList rendering for large datasets with virtualization
• Drag Handles – Precise control with dedicated drag areas
• Custom Animations – Spring, timing, or bring your own animation functions
• Pixel-Perfect Positioning – 9-point alignment system with custom offsets
• Boundary Constraints – Keep draggables within specific areas
• State Management – Complete lifecycle tracking and callbacks
• Developer Experience – Intuitive APIs, helpful warnings, and extensive examples

9. 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.

10. react-native-dnd

Modern and easy-to-use drag&drop library for react-native.

Features:

• Modern and future-proof: Built on react-native-reanimated v3
• Hooks based: Exposes powerful hooks useDraggable and useDroppable to build your own primitive components.
• Ready to use: Out-of-the-box configurable components like Draggable and Droppable to quickly get started.
• Powerful & Performant: The implementation has been tailored for advanced use cases where performance is critical. It can be used for a wide range of use cases like sorting items.

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