---
title: "Introduction"
description: "Vue DnD Kit is drag and drop for Vue 3 — sortable lists, kanban boards, trees, multi-drag and drop zones, animated and accessible out of the box."
canonical_url: "https://zizigy.github.io/vue-dnd-kit/docs/getting-started/introduction"
---

> Index of every page on this site: [llms.txt](https://zizigy.github.io/vue-dnd-kit/llms.txt)

Vue DnD Kit is drag and drop for Vue 3. Sortable lists, kanban boards, trees, multi-drag, copying
and drop zones — animated, keyboard-ready and announced to screen readers out of the box, in your
own markup.

<example height="27rem" hint="Move stops between days; the chips below name the other gestures" name="at-a-glance" title="At a glance">



</example>

None of it is code of the demo's own: the lists reorder live, the columns trade stops (one `group`),
a selection travels together (`selected`), <kbd value="Alt">



</kbd>

 turns a move into a copy (`clone`),
and the keyboard does all of it by slots. The demo renders the stops and passes a few options.

## What it is

A set of **composables** and one **provider** component. You render your own elements and hand
their template refs to the composables; the library takes care of the rest: pointer, touch and
keyboard input, finding the target, reordering, animating, auto-scrolling and telling screen
readers what happened.

```vue [Day.vue]
<script setup lang="ts">
const listRef = useTemplateRef<HTMLElement>('list');
// `items` is the draft: it reorders while you drag. On drop, `day.stops` gets the new order.
const { items } = makeSortableList(listRef, { items: toRef(props.day, 'stops'), group: 'trip' });
</script>

<template>
  <ul ref="list">
    <StopCard v-for="stop in items" :key="stop.id" :stop="stop" />
  </ul>
</template>
```

It renders nothing of its own except a floating **overlay** — by default, a clone of the element
being dragged. Your markup and your styles stay yours: the library adds ARIA attributes, and a few
`data-dnd-*` attributes to style the states of a drag.

## What you get

- **Sortable lists and grids** that reorder live while you drag, vertical, horizontal or in a grid.
- **Lists that share items**: kanban boards, palettes that hand out copies, swaps, rules for what
goes where.
- **Trees** with nesting by a sideways drag or by hovering a row, depth limits and rules.
- **Multi-drag** with your own selection (Ctrl/Cmd-click, a rubber band): the block travels
together.
- **Drop zones** with accept rules, and drops you confirm, refuse or apply yourself.
- **Animations by default**: items slide to their new places, the drop lands on its slot, a cancel
flies back.
- **Accessibility**: keyboard drags by slots, live announcements, ARIA attributes.
- **Virtual lists** with TanStack Virtual or VueUse: thousands of rows.
- **Sensors and actions**: your own input devices, and drags scripted from code.
- **DevTools**: a tab with a live map of every list, a joystick and a log of each drag.

## How it is different

- **Your data stays yours until the drop.** You render a *draft* of your array. While you drag,
only the draft moves; on drop the library writes the new order into your ref, or hands you
`e.result` to apply yourself (stores, servers, undo).
- **No wrapper components.** Rows are your elements, with a ref and one call, so the components
of a UI kit (Nuxt UI, Vuetify, your own) drag as they are.
- **Animated by default, never in your way.** Reorders, landings and cancels animate out of the
box; turn them off, tune them, or hand them to GSAP or motion.
- **The keyboard is not an afterthought.** Every drag can be done with <kbd value="Space">



</kbd>

 and the
arrows, moves are announced, and focus comes back where it was.
- **One provider for the whole app.** Areas give parts of the page their own rules (an axis,
bounds, a grid, a longer press), so nested features don't need nested providers.
- **Input is pluggable.** Pointer and keyboard are sensors; write your own for a gamepad or a
voice command, or move items from code with `@vue-dnd-kit/actions`.

## How it fits together

<table>
<thead>
  <tr>
    <th>
      Piece
    </th>
    
    <th>
      What it does
    </th>
  </tr>
</thead>

<tbody>
  <tr>
    <td>
      <code>
        DnDProvider
      </code>
    </td>
    
    <td>
      Owns the drag: input, the overlay, the selection, auto-scroll, announcements.
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        makeSortableList
      </code>
      
       / <code>
        makeSortableItem
      </code>
    </td>
    
    <td>
      A list that reorders, and its rows.
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        makeSortableTree
      </code>
    </td>
    
    <td>
      A tree, rendered flat with depths.
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        makeDraggable
      </code>
      
       / <code>
        makeDroppable
      </code>
    </td>
    
    <td>
      Free dragging and drop zones.
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        makeDragArea
      </code>
    </td>
    
    <td>
      Rules for a part of the page: axis, bounds, snapping, auto-scroll, activation.
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        makeSelectionArea
      </code>
    </td>
    
    <td>
      Rubber-band selection.
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        useDnD
      </code>
      
       / <code>
        useDnDMonitor
      </code>
    </td>
    
    <td>
      The drag state and its events, anywhere under the provider.
    </td>
  </tr>
</tbody>
</table>

<tip>

Coming from v2? The API changed: `useDnDProvider` became `useDnD`, and `makeConstraintArea` and
`makeAutoScroll` became `makeDragArea`. Sortable lists are now built in. See
[migrating from v2](https://zizigy.github.io/docs/getting-started/migrating-from-v2).

</tip>

## Requirements

- Vue **3.5** or newer.
- Modern browsers: Chrome and Edge 104+, Safari 15.4+, Firefox 104+.
- Works with SSR and Nuxt: the overlay and the live region mount on the client.

Next: [install it](https://zizigy.github.io/docs/getting-started/installation), then build a first list in the
[Quick start](https://zizigy.github.io/docs/getting-started/quick-start).

## Sitemap

See the full [sitemap](https://zizigy.github.io/vue-dnd-kit/sitemap.md) for all pages.