File Dropzone
Drag-and-drop file upload with size checks and a file list.
File Dropzone is a drag-and-drop upload area that also works by click and keyboard. While a file is dragged over, crop marks lock onto the zone and the icon lifts; dropped files list in with a stagger, oversized files get a clear message, and any file can be removed before upload.
Preview
Drop files here or click to browse
PNG, JPG or PDF · up to 10 MB
Installation
pnpm dlx shadcn@latest add https://ui.cuelark.com/r/file-dropzone.jsonThe CLI also installs the Cuelark theme tokens, the GSAP motion layer. With the @cuelark namespace configured, use @cuelark/file-dropzone.
Builds on: motion
Usage
import { FileDropzone } from "@/components/ui/file-dropzone";
<FileDropzone accept="image/*" maxSize={5_000_000} onFilesChange={setFiles} />Motion
Crop marks close in on drag-over; the icon lifts; new files stagger in.
Scale it with --cl-motion (0 off, 1 default, 1.5 expressive) on any ancestor. Reduced-motion preferences always switch it off.
API reference
FileDropzone
| Prop | Type | Default | Description |
|---|---|---|---|
| onFilesChange | (files: File[]) => void | — | Accepted files. |
| accept | string | — | Native accept filter. |
| multiple | boolean | true | Allow several files. |
| maxSize | number | — | Max bytes per file. |
| hint | ReactNode | — | Helper text. |
Accessibility
- The zone is a button: Enter or Space opens the file browser.
- Rejections are announced with role=alert.
FAQ
Also searched as: react file upload drag and drop · shadcn file upload · dropzone component react · drag and drop upload tailwind · react dropzone alternative