Drop Zone

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

On this page

Drop files here

Props

label

isDisabled

<DropZone>
  <DropZoneLabel>Drop files here</DropZoneLabel>
</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>

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`	`—`

The label of the drop zone, used as its accessible name.

Prop	Type	Default

Last updated on 6/16/2026