Drop Zone

Installation

Install the component via the CLI in one command.

npx shadcn@latest add @intentui/drop-zone

Manual installation

Use this approach if you prefer to install and wire up the component yourself instead of using the CLI.

npm install react-aria-components tailwind-merge

Anatomy

import { DropZone } from "@/components/ui/drop-zone"
import { Label } from "@/components/ui/field"

<DropZone>
  <Label>Toss your stuff here</Label>
</DropZone>

Examples

Using FileTrigger

The FileTrigger component can be used to select files from the file system, making it an excellent tool for managing files that have been dragged and dropped into the browser.

Component API

DropZone

The DropZone component accepts dragged files or items.

See the React Aria for the full API reference.