A file upload area with an animated dashed drag-over border, type and size checks, inline errors and a file list with simulated progress. It never uploads anything.
Attach receipts to this expense
Drop files here or browse
PDF, PNG, JPG, up to 5.0 MB
npx shadcn@latest add https://hyperblur.dev/r/dropzone.jsonWorks in any React project set up with the shadcn CLI. The file lands in components/hyperblur/dropzone.tsx.
import { Dropzone } from "@/components/hyperblur/dropzone"
<Dropzone accept=".png,.jpg,.pdf" maxSize={5 * 1024 * 1024} simulate onFiles={(files) => console.log(files)} />| Prop | Type | Default | Description |
|---|---|---|---|
| accept | string | "" | Comma-separated extensions or MIME types, for example .png,.jpg,.pdf. Empty accepts any file. |
| maxSize | number | 10485760 | Largest file size in bytes. |
| maxFiles | number | 6 | Most files kept in the list at once. |
| multiple | boolean | true | Allow several files. When false, a new file replaces the current one. |
| simulate | boolean | false | Animate a fake upload progress for each added file. Without it files show as ready immediately. |
| disabled | boolean | false | Block drops, clicks and keyboard browsing. |
| title | string | "Drop files here or browse" | Main line inside the zone. |
| hint | string | Second line. Defaults to a summary of the accepted types and the size limit. | |
| size | "md" | "sm" | "md" | sm turns the zone into a compact horizontal strip. |
| accent | string | "#2f7bff" | Drag-over border, icon and progress color. |
| defaultFiles | { name: string; size: number; progress?: number }[] | Files shown at the start. Their progress stays where you set it. | |
| onFiles | (files: File[]) => void | Called with the accepted File objects. Send them wherever you like. | |
| onReject | (rejections: { name: string; reason: string }[]) => void | Called with the files that failed the type, size or count checks. | |
| onRemove | (file: DropzoneFile) => void | Called when a file is removed from the list. |