File Dropzone
Drag-and-drop upload zone with type / size checks, file list and progress.
Copy a prompt for your AI coding tool with the source, dependencies and usage
Props
FileDropzoneProps
Also accepts all props of Omit<React.ComponentProps<"div">, "onChange">
| Prop | Type | Default | Description |
|---|---|---|---|
| onFilesChange | (files: File[]) => void | — | — |
| accept | string | "" | Same syntax as the input's accept attribute, e.g. "image/*,.pdf" |
| multiple | boolean | true | — |
| maxSizeMb | number | 10 | Largest accepted file, in MB |
| maxFiles | number | 5 | — |
| title | string | "Drop files here or click to browse" | — |
| hint | string | — | — |
| simulateUpload | boolean | true | Show a progress bar per file while the upload is simulated |
Install
$ npx shadcn@latest add https://chromotion.dev/r/file-dropzone.jsonThe CLI installs the base component; your customizations live in the code generated on the Customize tab.