Animated file upload dropzone
Drop files, a shockwave rolls out, each file gets a progress ring. Free.
Use it in Next.js
"use client";
import { UploadDropzone } from "@/components/upload-dropzone/UploadDropzone";
export default function Upload() {
return <UploadDropzone accept="image/*,.pdf" maxSize={10_000_000} onAllDone={(items) => console.log(items)} />;
}Install
- One command
npx shadcn@latest add https://teodoravadani.github.io/qodesign-free/r/upload-dropzone.json - Or ask your AIPaste PROMPT.md into Cursor, Lovable or v0.
Props
- upload
- your uploader (simulated without it)
- accept
- file types
- maxSize
- bytes
- onAllDone
- every file finished
Questions
Does the dropzone work in Next.js?
Yes, as a client component. Keep "use client" at the top of the file that renders it, as in the snippet above. App Router and Pages Router both work.
Where do files go?
Wherever your upload function sends them: S3, UploadThing, Supabase Storage.
Is it really free?
Yes. MIT licence, no email needed for the registry install.
Can Cursor or v0 add it for me?
Yes. The folder has a PROMPT.md. Paste it into Cursor, Lovable, v0 or Claude Code.