← Documentation GitHub npm
✦ Interactive Playground — v0.2.0

Experience
react-dropkit live.

All demos run directly in your browser using the real File API. Drag real files, see real previews, watch real progress.

Demo 1
Styled Component
Drop files or click to browse. Supports drag-and-drop, image previews, and simulated upload progress.
<Dropzone />
Drag & drop files here
image/*, .pdf, .docx Max 10MB Up to 6 files
Demo 2
Headless Hook
Full control over the UI. The hook handles all logic — you bring the design.
useFileUpload()
🎨

Custom drop zone — click or drag anything

Any file type · Max 20MB
Demo 3
Single File — Avatar Uploader
Set multiple=false. Adding a new image replaces the previous one.
👤

No file selected

Click the circle to upload an image

Demo 4
Validation — PDFs Only, Max 2MB
Try dragging an image or a large file. Validation rejects it before anything is added.
PDFs only
.pdf onlyMax 2MBUp to 3 files
Demo 5
Manual Upload + Custom Buttons
Set autoUpload=false and showUploadButton. Files sit idle until you click Upload.
autoUpload=false
Add files — they won't upload until you click the button
image/*, .pdf Max 10MB Up to 5 files
Ready to use it in your project?
Zero configuration. Works with Next.js, Vite, Remix, and Create React App.
npm install react-dropkit
Read the docs View on GitHub