1

Update dependencies

Update your package.json and install the new packages:

  "dependencies": {
-   "@dnd-kit/core": "^x.x.x"
-   "@dnd-kit/sortable": "^x.x.x"
-   "@dnd-kit/utilities": "^x.x.x"
+   "@dnd-kit/react": "^1.0.0"
+   "@dnd-kit/helpers": "^1.0.0"
  }

After updating your package.json, install the new dependencies with your package manager of choice.

2

Migrate context provider

Update your context provider. The new DragDropProvider replaces the legacy DndContext:

The new provider gives you access to the manager instance in event handlers, enabling more advanced control over the drag and drop system.

3

Update draggable components

Update your draggable components using the new useDraggable hook:

4

Update droppable components

Update your droppable components using the new useDroppable hook:

5

Update drag overlay

The DragOverlay component has been simplified:

Only render the DragOverlay component once per DragDropProvider. The hooks have no effect when used within the overlay.

6

Migrate sortable components

Update your sortable components using the new useSortable hook:

Use the array manipulation helpers from @dnd-kit/helpers to handle reordering.

​
Next steps

Quickstart guide

Build beautiful drag and drop interfaces in minutes with the new dnd kit

Draggable elements

Learn how to make elements draggable with the new API

Droppable targets

Create drop zones and handle collision detection

Sortable lists

Build sortable interfaces with array manipulation helpers

useDragDropMonitorMultiple sortable lists