> ## Documentation Index
> Fetch the complete documentation index at: https://dndkit.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Quickstart

> Start building drag and drop interfaces with React in minutes.

export const Story = ({id, framework = "react", width = "100%", height = "250", hero = false}) => {
  const BRANCH = 'experimental';
  const STORYBOOKS = {
    react: {
      localPort: 6006,
      productionHost: '5fc05e08a4a65d0021ae0bf2'
    },
    vue: {
      localPort: 6008,
      productionHost: '6989440ed560d70abcd6bcc7'
    },
    vanilla: {
      localPort: 6007,
      productionHost: '69892d294eb9040f0d29aa81'
    },
    solid: {
      localPort: 6009,
      productionHost: '698944444eb9040f0d2a0217'
    },
    svelte: {
      localPort: 6010,
      productionHost: '69910d2a631cb57638616dcd'
    }
  };
  const config = STORYBOOKS[framework] ?? STORYBOOKS.react;
  const isDev = import.meta.env.DEV;
  const host = isDev ? `//localhost:${config.localPort}` : `https://${BRANCH}--${config.productionHost}.chromatic.com`;
  return <Frame>
      <iframe src={`${host}/iframe.html?args=&id=${id}&viewMode=story&hero=${hero}`} width={width} height={height} />
    </Frame>;
};

<Card title="You will learn">
  <div class="info">
    1. How to make elements draggable
    2. How to set up droppable targets
    3. How to listen to drag and drop events to move elements
  </div>
</Card>

## Overview

The `@dnd-kit/react` package provides a set of React components and hooks that you can use to build drag and drop interfaces. It is thin React integration layer built on top of the [vanilla](/) library, so all of the same concepts are shared and can be used. You can refer to the vanilla documentation of these concepts, such as [plugins](/extend/plugins), [modifiers](/extend/modifiers), and [sensors](/extend/sensors).

## Installation

Before getting started, make sure you install `@dnd-kit/react` in your project:

<CodeGroup>
  ```bash npm theme={null}
  npm install @dnd-kit/react
  ```

  ```bash yarn theme={null}
  yarn add @dnd-kit/react
  ```

  ```bash pnpm theme={null}
  pnpm add @dnd-kit/react
  ```

  ```bash bun theme={null}
  bun add @dnd-kit/react
  ```
</CodeGroup>

<Note>
  `@dnd-kit/react` is the only required package. For sortable lists, you'll also want `@dnd-kit/helpers`
  for the [`move`](/react/guides/sortable-state-management) utility. Packages like `@dnd-kit/dom` and `@dnd-kit/abstract` are installed
  automatically as dependencies.

  If you're migrating from the legacy `@dnd-kit/core`, `@dnd-kit/sortable`, or `@dnd-kit/utilities`
  packages, see the [Migration guide](/react/guides/migration).
</Note>

## Making elements draggable

Let's get started by creating draggable elements that can be dropped over droppable targets. To do so, we'll be using the `useDraggable` hook.

The `useDraggable` hook requires a unique `id`, and returns a `ref` that you can attach to any element to make it draggable.

```jsx theme={null}
import {useDraggable} from '@dnd-kit/react';

function Draggable() {
  const {ref} = useDraggable({
    id: 'draggable',
  });

  return (
    <button ref={ref}>
      Draggable
    </button>
  );
}
```

<Story id="react-draggable--example" />

## Creating droppable elements

In order for our draggable elements to have targets where they can be dropped, we need to create droppable elements.
To do so, we'll be using the `useDroppable` hook.

Like the `useDraggable` hook, the `useDroppable` hook requires a unique `id`, and returns a `ref` that you can attach to any element to make it droppable.

This time, we'll accept the `id` argument as a prop of the `Droppable` component.

```jsx theme={null}
import {useDroppable} from '@dnd-kit/react';

function Droppable({id, children}) {
  const {ref} = useDroppable({
    id,
  });

  return (
    <div ref={ref} style={{width: 300, height: 300}}>
      {children}
    </div>
  );
}
```

## Putting all the pieces together

Now that we have both draggable and droppable elements, we can put them together to create a simple drag and drop interaction.

We'll be using the `DragDropProvider` component to wrap our draggable and droppable elements.
This component handles the drag and drop interactions between our draggable and droppable elements and allow us listen to drag and drop events.

<CodeGroup>
  ```jsx App.js theme={null}
  import {DragDropProvider} from '@dnd-kit/react';
  import Draggable from './Draggable';
  import Droppable from './Droppable';

  function App() {
    const [isDropped, setIsDropped] = useState(false);

    return (
      <DragDropProvider
        onDragEnd={(event) => {
          if (event.canceled) return;

          const {target} = event.operation;
          setIsDropped(target?.id === 'droppable');
        }}
      >
        {!isDropped && <Draggable />}

        <Droppable id="droppable">
          {isDropped && <Draggable />}
        </Droppable>
      </DragDropProvider>
    );
  }
  ```

  ```jsx Draggable.js theme={null}
  import {useDraggable} from '@dnd-kit/react';

  export function Draggable() {
    const {ref} = useDraggable({
      id: 'draggable',
    });

    return (
      <button ref={ref}>
        Draggable
      </button>
    );
  }
  ```

  ```jsx Droppable.js theme={null}
  import {useDroppable} from '@dnd-kit/react';

  function Droppable({id, children}) {
    const {ref} = useDroppable({
      id,
    });

    return (
      <div ref={ref} style={{width: 300, height: 300}}>
        {children}
      </div>
    );
  }
  ```
</CodeGroup>

<div class="mt-8">
  <Story id="react-droppable--example" height="390" />
</div>

We now have a simple drag and drop interaction set up. You can now build on top of this to create more complex interactions.

For example, you can render multiple draggable elements and droppable targets, and listen to drag and drop events to move elements around.

Let's try adding more droppable targets to our example:

```jsx App.js theme={null}
import React, {useState} from 'react';
import {DragDropProvider} from '@dnd-kit/react';

import {Droppable} from './Droppable';
import {Draggable} from './Draggable';

function App() {
  const targets = ['A', 'B', 'C'];
  const [target, setTarget] = useState();
  const draggable = (
    <Draggable id="draggable">Drag me</Draggable>
  );

  return (
    <DragDropProvider
      onDragEnd={(event) => {
        if (event.canceled) return;

        setTarget(event.operation.target?.id);
      }}
    >
      {!target ? draggable : null}

      {targets.map((id) => (
        <Droppable key={id} id={id}>
          {target === id ? draggable : `Droppable ${id}`}
        </Droppable>
      ))}
    </DragDropProvider>
  );
};
```

<Story id="react-droppable-multiple-drop-targets--example" height="740" />

## Next steps

Now that you have a basic understanding of how to make elements draggable and droppable, you can explore the concepts covered in this quickstart guide in more detail:

<CardGroup>
  <Card title="DragDropProvider" icon="sitemap" href="/react/components/drag-drop-provider">
    Create drag and drop contexts for your draggable and droppable elements.
  </Card>

  <Card title="useDraggable" icon="bullseye-pointer" href="/react/hooks/use-draggable">
    Learn how to make elements draggable with the `useDraggable` hook.
  </Card>

  <Card title="useDroppable" icon="expand" href="/react/hooks/use-droppable">
    Learn how to create droppable targets with the `useDroppable` hook.
  </Card>

  <Card title="useSortable" icon="layer-group" href="/react/hooks/use-sortable">
    Learn how to create sortable elements with the `useSortable` hook.
  </Card>
</CardGroup>