- Docs
- components
- Dropzone
Dropzone
A drop zone is an area into which one or multiple objects can be dragged and dropped.
There is no native element to implement a drop zone in HTML. DropZone helps achieve accessible dropzone components that can be styled as needed.
Preview
Code
Drop files here
Installation
CLI
Copy & Paste
NPM
PNPM
Bun
Yarn
npx shadcn@latest add https://backchanel.com/default/dropzoneComposed Components
A DropZone uses the following components, which may also be used standalone or reused in other components.
FileTrigger
A FileTrigger allows a user to access the file system with any pressable React Aria or React Spectrum component, or custom components built with usePress.
Basic
Preview
Code
Drop files here
FileTrigger
To allow the selection of files from the user's device, pass FileTrigger as a child of DropZone.
Preview
Code
Drop files here