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

# Cursor

> Updates cursor styles during drag operations.

## Overview

The `Cursor` plugin overrides the cursor style on the entire document while a drag operation is in progress, providing visual feedback that an element is being dragged.

This plugin is included by default when creating a new `DragDropManager`.

## Configuration

Use `Cursor.configure()` to customize the cursor style:

<CodeGroup>
  ```ts TypeScript theme={null}
  import {DragDropManager, Cursor} from '@dnd-kit/dom';

  const manager = new DragDropManager({
    plugins: (defaults) => [
      ...defaults,
      Cursor.configure({ cursor: 'move' }),
    ],
  });
  ```

  ```tsx React theme={null}
  import {DragDropProvider} from '@dnd-kit/react';
  import {Cursor} from '@dnd-kit/dom';

  function App() {
    return (
      <DragDropProvider
        plugins={(defaults) => [
          ...defaults,
          Cursor.configure({ cursor: 'move' }),
        ]}
      >
        {/* ... */}
      </DragDropProvider>
    );
  }
  ```

  ```vue Vue theme={null}
  <script setup>
  import {DragDropProvider} from '@dnd-kit/vue';
  import {Cursor} from '@dnd-kit/dom';
  </script>

  <template>
    <DragDropProvider
      :plugins="(defaults) => [...defaults, Cursor.configure({ cursor: 'move' })]"
    >
      <!-- ... -->
    </DragDropProvider>
  </template>
  ```

  ```svelte Svelte theme={null}
  <script>
    import {DragDropProvider} from '@dnd-kit/svelte';
    import {Cursor} from '@dnd-kit/dom';
  </script>

  <DragDropProvider
    plugins={(defaults) => [...defaults, Cursor.configure({ cursor: 'move' })]}
  >
    <!-- ... -->
  </DragDropProvider>
  ```

  ```tsx Solid theme={null}
  import {DragDropProvider} from '@dnd-kit/solid';
  import {Cursor} from '@dnd-kit/dom';

  function App() {
    return (
      <DragDropProvider
        plugins={(defaults) => [
          ...defaults,
          Cursor.configure({ cursor: 'move' }),
        ]}
      >
        {/* ... */}
      </DragDropProvider>
    );
  }
  ```
</CodeGroup>

## Options

<ParamField path="cursor" type="string" default="grabbing">
  The CSS cursor value to apply to the document body during drag operations.
</ParamField>