Easy Installation

Drop Upload ships as a self-contained component folder — there's no package to publish or version, just files to copy into your project.

1. Copy the DropUpload folder into your project
2. Install motion
3. Import and render <DropUpload />

1. Copy the component

Copy the DropUpload folder from your downloaded ZIP into your project, for example into src/components/. Everything the component needs is self-contained inside that folder.

2. Install dependencies

Drop Upload relies on a single library:

pnpm add motion

npm or yarn work the same way — replace pnpm add with npm install or yarn add.

3. Use it

import { DropUpload } from "../components/DropUpload"

export default function YourPage() {
  return <DropUpload />
}

The import path is relative to the file you write it in, so it works in any bundler — Next.js, Vite, Remix or Astro. If your project has a path alias configured (@/ in a Next.js app, for example), import { DropUpload } from "@/components/DropUpload" works just as well; the examples in these docs stay relative so they can be pasted into a project without one.

Everything the component exposes — DropUpload, AvatarUpload, the upload adapters and the TypeScript types — comes from that same folder import. There is nothing to import from the files inside it.

Continue to Usage to configure validation and behavior.