A drop area whose dashed border flows when a file is dragged over, with a progress bar per file that ends in a drawn tick or a clear error.
Upload files
Drag files here, or . Up to 10 MB each.
Customize
Usage
import { UploadDropzone } from "@/components/motionkit/upload-dropzone";
<UploadDropzone
accept="image/*,.pdf"
upload={async (file, progress) => {
// e.g. ask your API for a presigned URL, then PUT the file and report progress as it goes
const { url } = await fetch("/api/uploads", { method: "POST", body: JSON.stringify({ name: file.name }) }).then((r) => r.json());
await putWithProgress(url, file, progress);
}}
/>Motion
The exact curves this component runs, plotted with Motion's own maths.
Border flow
A file is dragged over
Progress
Upload reports progress
Avatars, attachments, imports and document uploads in apps and dashboards, anywhere people bring files in.
The drop area counts dragenter and dragleave events, so hovering over its children never makes the highlight flicker. Its dashed border is an SVG rectangle measured to the area, and while a file hovers, its dash offset animates so the dashes flow round the edge. Each file gets a row immediately: oversized files are rejected on the spot, and the rest call your upload function, which reports progress from 0 to 1. Rows end in a tick drawn with pathLength, or the error message. A real button opens the native file picker, and every outcome is announced in a status region.
| Prop | Type | Default | Description |
|---|---|---|---|
| upload | (file: File, progress: (fraction: number) => void) => Promise<void> | — | Uploads one file and reports progress; throw to fail. |
| accept | string | — | Allowed file types, as for an input, e.g. "image/*,.pdf". |
| maxSizeMb | number | 10 | Largest file allowed, in megabytes. |
| multiple | boolean | true | Allow several files at once. |
| label | string | "Upload files" | Heading and accessible name. |
| accent | string | "#5FAEB4" | Colour of the highlight, progress and ticks. |
How we audit: the WCAG 2.2 animation checklist and respecting reduced motion in React.
Yes. The file starts with "use client", so you can import it straight into a Server Component page or layout. It works in Vite as is, and in Astro as a React island.
Only the motion package, beside React and Tailwind CSS v4. There is no MotionKit package and no Tailwind config to add.
Yes, with MotionKit Plus. Add the @motionkit registry and your personal token to components.json (the snippet is on your account page), then run npx shadcn@latest add @motionkit/upload-dropzone. It saves the file to components/motionkit and installs its dependencies.
Upload Dropzone is part of MotionKit Plus (£12 a month or £96 a year). The live preview and playground are free to explore; Plus unlocks its source code, every customisation control and commercial use.
With reduced motion on, the border doesn't flow, the icon doesn't lift and progress changes without springing.
No: you pass an upload function, so files go wherever you choose, such as your API or a presigned storage URL. The component handles the drag and drop, validation, progress and feedback.
Elastic Slider
A range slider with give: the value bubble leans as you drag, and pulling past the ends stretches the track like rubber.
Password Strength
A password field with a four-bar strength meter and requirements that tick themselves off as you type.
Liquid Toggle
A switch whose knob stretches like liquid on its way across, then settles.
Upload files
Drag files here, or . Up to 10 MB each.
Customize
Usage
import { UploadDropzone } from "@/components/motionkit/upload-dropzone";
<UploadDropzone
accept="image/*,.pdf"
upload={async (file, progress) => {
// e.g. ask your API for a presigned URL, then PUT the file and report progress as it goes
const { url } = await fetch("/api/uploads", { method: "POST", body: JSON.stringify({ name: file.name }) }).then((r) => r.json());
await putWithProgress(url, file, progress);
}}
/>Motion
The exact curves this component runs, plotted with Motion's own maths.
Border flow
A file is dragged over
Progress
Upload reports progress
The live preview is free to explore. Plus unlocks the source for Upload Dropzone and every other premium component.