Skip to main content

​
Overview

The Feedback plugin manages the visual appearance of elements during drag operations. It promotes dragged elements to the browser’s top layer using the 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: 
import {DragDropManager, Feedback} from '@dnd-kit/dom';

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

​
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. 
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>;
}

​
Per-entity options

​
feedback
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)
​
dropAnimation
DropAnimation | null
Customize or disable the drop animation for this entity. Overrides the global dropAnimation option.

​
Global options

​
dropAnimation
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
​
keyboardTransition
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
​
rootElement
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.

​
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: 
@layer dnd-kit, base, components, utilities;