An upload zone in three variants, panel, strip and round avatar, with a marching dashed border on drag and a lifting icon. Each file gets a typed document glyph, a progress ring and a bottom progress line, and rejected files shake with the reason.
Drop files here or browse
PDF, ZIP or images up to 50 MB
npx shadcn@latest add https://hyperblur.dev/r/input-file-drop.jsonWorks in any React project set up with the shadcn CLI. The file lands in components/hyperblur/input-file-drop.tsx.
import { InputFileDrop } from "@/components/hyperblur/input-file-drop"
<InputFileDrop accept="image/*,.pdf" maxSize={20 * 1024 * 1024} onFilesChange={(files) => console.log(files)} />| Prop | Type | Default | Description |
|---|---|---|---|
| variant | "panel" | "strip" | "avatar" | "panel" | Large drop area, a one-line strip, or a round photo picker. |
| accept | string | Allowed types like the input accept attribute, for example "image/*,.pdf". | |
| maxSize | number | 10485760 | Largest file in bytes. Bigger files are listed with an error. |
| multiple | boolean | true | Allow several files at once. The avatar variant always takes one. |
| title | string | Main line of the zone. In the avatar variant it is the person's name used for initials. | |
| hint | string | Second line. Defaults to the accepted types and the size limit. | |
| defaultItems | InputFileDropItem[] | [] | Files to list on first render, with name, size, progress and status. |
| onFilesChange | (items: InputFileDropItem[]) => void | Called whenever the list changes, including progress. | |
| onUpload | (file: File, onProgress: (p: number) => void) => Promise<void> | Your upload. Report progress from 0 to 1; reject to mark the file as failed. Without it, uploads are simulated. | |
| accent | string | "#2f7bff" | Drag border, progress and focus color. |
| disabled | boolean | false | Disables picking and dropping. |