"use client"; import { DragOverlay as DndKitDragOverlay, type DragOverlayProps as DndKitDragOverlayProps, } from "@dnd-kit/core"; import { cn } from "@/lib/registry/cn"; import { useDndMounted } from "./dnd-context"; export interface DragOverlayProps extends DndKitDragOverlayProps { /** Additional class names for the overlay wrapper */ className?: string; } /** * DragOverlay renders a draggable element that follows the cursor. * It's removed from the normal document flow and positioned relative to the viewport. * * Use this when: * - Items need to move between containers * - You want a custom drag preview * - You need the dragged item to appear above all other elements * * Example: * ```tsx * const [activeId, setActiveId] = useState(null); * * setActiveId(active.id)} onDragEnd={() => setActiveId(null)}> * * {items.map(item => {item.content})} * * * {activeId ?

{items.find(i => i.id === activeId)?.content}

: null} * * * ``` */ export function DragOverlay({ children, className, dropAnimation = { duration: 250, easing: "cubic-bezier(0.18, 0.67, 0.6, 1.22)", }, ...props }: DragOverlayProps) { const isMounted = useDndMounted(); // Don't render on server if (!isMounted) { return null; } return ( {children ? (

{children}

) : null} ); } // Re-export for convenience export { DragOverlay as DndKitDragOverlay } from "@dnd-kit/core";

Drag Overlay

Showcase

Drag Overlay