Drop Zone

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

Drop files here

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

Installation

npm

pnpm

yarn

bun

npx shadcn@latest add @dotui/drop-zone

Usage

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

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

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

Anatomy

DropZoneLabel nests inside DropZone and provides its accessible name.

<DropZone>
  <DropZoneLabel />
</DropZone>

Handling drops

Read dropped data in onDrop from e.items, filtering by kind and types, and call getText on text items.

import type { TextDropItem } from "react-aria-components"

<DropZone
  onDrop={async (e) => {
    const items = await Promise.all(
      e.items
        .filter((item) => item.kind === "text" && item.types.has("text/plain"))
        .map((item) => (item as TextDropItem).getText("text/plain")),
    )
  }}
>
  <DropZoneLabel>Droppable</DropZoneLabel>
</DropZone>

Accepted drop types

Restrict what the zone accepts by returning 'copy' or 'cancel' from getDropOperation based on the dragged types.

<DropZone
  getDropOperation={(types) => (types.has("image/png") ? "copy" : "cancel")}
  onDrop={handleDrop}
/>

Pairing with FileTrigger

Add a FileTrigger with a Button so users can drop files or click to browse.

<DropZone>
  <DropZoneLabel>Drag and drop files here</DropZoneLabel>
  <FileTrigger>
    <Button>Select files</Button>
  </FileTrigger>
</DropZone>

Examples

Basic Drop Zone

With File Trigger

Drag and drop files here

Drag and Drop Events

Drag me

Droppable

Visual Feedback

Drop files here

API Reference

DropZone

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

DropZoneLabel

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

Prop	Type	Default

Last updated on 8/3/2026