React File Upload
A drag-and-drop dropzone with a queued file list, per-file progress bars, size/type validation, and remove controls. Drop files or click to browse; oversized files are flagged. Progress is simulated in this demo — wire the onFiles callback to your own uploader.
Drag & drop files, or browse
SystemVerilog, VHDL, or a .zip — up to 25 MB each
Installation
npx shadcn@latest add "https://kelvinui.com/registry/file-upload.json"
Props
| Prop | Type | Description |
|---|---|---|
| accept | string | Accepted types, e.g. ".sv,.v" or "image/*" |
| maxSizeMB | number | Max size per file in MB (default 25) |
| multiple | boolean | Allow multiple files (default true) |
| hint | string | Sub-text under the prompt |
| onFiles | (files: File[]) => void | Fires with the selected/dropped File objects |
New components every week
Get the week's new Kelvin UI components and templates in one short email. No spam, unsubscribe anytime.