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, whether it's 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.