Drag files onto the zone and it lights up: the dashed border speeds up, a glow follows the cursor and the icon jumps. Let go and a shockwave rolls out from the drop point while each file lands in the list with a type badge and its own progress ring. A file that fails shakes, turns red and offers Retry, and a total bar adds it all up. Bring your own upload function (S3, UploadThing, Supabase Storage); without one, uploads are simulated while you build the UI.
- Drag-over glow and shockwave on drop
- A progress ring per file
- Failed files shake and offer Retry
- Your own upload function, simulated without one
- Stack
- React + TypeScript, Tailwind CSS, Framer Motion
- Next.js
- App Router ready, "use client" included
- Also included
- A single HTML file version and PROMPT.md
- Licence
- MIT
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.