Dnd

component

A generic drag source: makes its `children` draggable and exposes an opaque `data` payload to drop targets.

Install

npx shadcn@latest add @engram/dnd

Registry item: /r/dnd.json — the machine-readable definition agents install from.

Example

510

506

503

Equip

Props

api

Draggable

Prop	Type	Default	Description
`data`*	`unknown`	`—`	Opaque payload handed to `accept`/`onDrop`.
`disabled`	`boolean`	`false`	Disable dragging (e.g. locked items).
`draggingClassName`	`string`	`"opacity-50"`	Class applied while this element is being dragged.
`onDragStart`	`(data: unknown) => void`	`—`	—
`onDragEnd`	`(data: unknown) => void`	`—`	—

DropZone

Prop	Type	Default	Description
`accept`	`(data: unknown) => boolean`	`—`	Return false to reject the hovering payload (no drop, no active style).
`onDrop`	`(data: unknown) => void`	`—`	Fired with the dropped payload when a valid item is released here.
`activeClassName`	`string`	`"outline-2 outline-engram-accent"`	Class applied while a valid payload is hovering.

Own the code: shadcn add copies this component's source into your repo to read and edit directly. Extend without forking — edit the source, use asChild to swap the element, or pass the typed annotations prop for curated data.