Drop Zone

Basic

DropZone provides support for mouse, keyboard, and touch interactions. Simply connect the onDrop prop to handle all the drop actions. Additionally, you’ll receive real-time updates through onDropEnter, onDropMove, and onDropExit events as users interact with the drop zone.

Installation

npx shadcn@latest add @intentui/drop-zone

Manual installation

npm i react-aria-components

Anatomy

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

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

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.