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

# Feedback

> Manages visual feedback during drag operations, including top layer promotion and drop animations.

## Overview

The `Feedback` plugin manages the visual appearance of elements during drag operations. It promotes dragged elements to the browser's [top layer](https://developer.mozilla.org/en-US/docs/Glossary/Top_layer) using the [Popover API](https://developer.mozilla.org/en-US/docs/Web/API/Popover_API), and injects CSS rules to handle positioning and to reset browser default popover styles.

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

## Configuration

Use `Feedback.configure()` to customize the drop animation or other options:

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

  const manager = new DragDropManager({
    plugins: (defaults) => [
      ...defaults,
      Feedback.configure({ dropAnimation: null }),
    ],
  });
  ```

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

  function App() {
    return (
      <DragDropProvider
        plugins={(defaults) => [
          ...defaults,
          Feedback.configure({ dropAnimation: null }),
        ]}
      >
        {/* ... */}
      </DragDropProvider>
    );
  }
  ```

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

  <template>
    <DragDropProvider
      :plugins="(defaults) => [...defaults, Feedback.configure({ dropAnimation: null })]"
    >
      <!-- ... -->
    </DragDropProvider>
  </template>
  ```

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

  <DragDropProvider
    plugins={(defaults) => [...defaults, Feedback.configure({ dropAnimation: null })]}
  >
    <!-- ... -->
  </DragDropProvider>
  ```

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

  function App() {
    return (
      <DragDropProvider
        plugins={(defaults) => [
          ...defaults,
          Feedback.configure({ dropAnimation: null }),
        ]}
      >
        {/* ... */}
      </DragDropProvider>
    );
  }
  ```
</CodeGroup>

## Per-entity configuration

In addition to global configuration on the `DragDropManager`, you can configure the Feedback plugin on individual draggable or sortable entities using `Feedback.configure()` in the entity's `plugins` array. Per-entity options override the global configuration for that entity.

<CodeGroup>
  ```tsx React theme={null}
  import {useDraggable} from '@dnd-kit/react';
  import {Feedback} from '@dnd-kit/dom';

  function Draggable({id}) {
    const {ref} = useDraggable({
      id,
      plugins: [
        Feedback.configure({
          feedback: 'clone',
          dropAnimation: null,
        }),
      ],
    });

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

  ```ts TypeScript theme={null}
  import {Draggable, Feedback} from '@dnd-kit/dom';

  const draggable = new Draggable({
    id: 'draggable-1',
    element,
    plugins: [
      Feedback.configure({
        feedback: 'clone',
        dropAnimation: null,
      }),
    ],
  }, manager);
  ```
</CodeGroup>

### Per-entity options

<ParamField path="feedback" type="FeedbackType">
  The type of visual feedback to show during drag for this entity.

  * `'default'` — the original element moves with the drag
  * `'clone'` — a copy of the element stays in place while the original moves
  * `'move'` — the element moves without a placeholder
  * `'none'` — no visual feedback (useful for custom drag overlays)
</ParamField>

<ParamField path="dropAnimation" type="DropAnimation | null">
  Customize or disable the drop animation for this entity. Overrides the global `dropAnimation` option.
</ParamField>

## Global options

<ParamField path="dropAnimation" type="DropAnimation | null">
  Customize or disable the drop animation that plays when a dragged element is released.

  * `undefined` (default) — use the built-in drop animation
  * `null` — disable the drop animation entirely
  * `DropAnimationOptions` — customize the duration and easing of the built-in animation
  * `DropAnimationFunction` — provide a fully custom animation function
</ParamField>

<ParamField path="keyboardTransition" type="KeyboardTransition | null">
  Customize or disable the CSS transition applied when moving elements via keyboard.

  By default, keyboard-driven moves animate with `250ms cubic-bezier(0.25, 1, 0.5, 1)`. This transition is automatically disabled when the user prefers reduced motion.

  * `undefined` (default) — use the built-in keyboard transition
  * `null` — disable the transition (moves are instant, like pointer operations)
  * `{ duration, easing }` — customize the transition duration (in ms) and CSS easing function
</ParamField>

<ParamField path="rootElement" type="Element | ((source: Draggable) => Element)">
  An element (or a function returning one) to use as the root container for the dragged element. When set, the dragged element is moved into this container during the drag operation.
</ParamField>

## CSS Cascade Layer

The Feedback plugin uses a CSS cascade layer named `dnd-kit` to reset user-agent popover styles (such as `background`, `border`, `margin`, and `padding`) that browsers apply to elements promoted to the top layer.

By default, this layer is injected at the beginning of the document's `<head>`, giving it the lowest cascade priority. This means your styles will take precedence without needing `!important`.

If you use a CSS framework that defines its own cascade layers (such as Tailwind CSS v4), you can explicitly declare the `dnd-kit` layer first to ensure it has the lowest priority:

```css theme={null}
@layer dnd-kit, base, components, utilities;
```