Drop Zone

A drop zone is an area into which one or more objects can be dragged and dropped.

<DropZone>
  <UploadIcon className="size-5 text-fg-muted" />
</DropZone>

Installation

npm

pnpm

yarn

bun

npx shadcn@latest add @dotui/drop-zone

Use drop zones to allow users to drag and drop files or content into a designated area.

import { DropZone, DropZoneLabel } from "@/components/ui/drop-zone";

<DropZone>
	<DropZoneLabel>Drop files here</DropZoneLabel>
</DropZone>

Use the controls below to experiment with different drop zone props and see the live preview and code update.

Drop files here

label

isDisabled

<DropZone>
  <DropZoneLabel>Drop files here</DropZoneLabel>
</DropZone>

Drag and drop files here

Drop files here

Drag and drop files here

Drag me

Droppable

Drag and drop files here

A drop zone is an area into which one or multiple objects can be dragged and dropped.

Prop	Type	Default
	`ReactNode \| function`	`—`
	`((types: DragTypes, allowedOperations: DropOperation[]) => DropOperation)`	`—`
	`boolean`	`—`
	`DOMRenderFunction<"div", DropZoneRenderProps>`	`—`

Missing description.

Last updated on 6/3/2026