Quickstart — add to an existing project

Most people land here with a Next.js app already running. Three steps:

pnpm add @uploadkitdev/react @uploadkitdev/next

Create app/api/uploadkit/[...uploadkit]/route.ts:

import { createUploadKitHandler, type FileRouter } from '@uploadkitdev/next';

const router = {
  default: { maxFileSize: '4MB', allowedTypes: ['image/*'] },
} satisfies FileRouter;

export const { GET, POST } = createUploadKitHandler({
  router,
  apiKey: process.env.UPLOADKIT_API_KEY!,
});

Wrap the root layout and drop in a dropzone:

// app/layout.tsx
import { UploadKitProvider } from '@uploadkitdev/react';
// <UploadKitProvider endpoint="/api/uploadkit">{children}</UploadKitProvider>

// any page
import { UploadDropzone } from '@uploadkitdev/react';
// <UploadDropzone route="default" />

Set UPLOADKIT_API_KEY=uk_live_... in .env.local and you're done. Full walkthrough: docs.uploadkit.dev/docs/getting-started/quickstart.

Starting a new project?

npx create-uploadkit-app my-app

Templates for Next.js, SvelteKit, Remix, and Vite — see the CLI guide.

Using an AI-assistant IDE?

Install the UploadKit MCP server and let Claude Code, Cursor, Windsurf, or Zed wire the whole thing up for you:

npx -y @uploadkitdev/mcp

Packages

Package	Version	Description
@uploadkitdev/core		Framework-agnostic upload client (browser, Node, Edge)
@uploadkitdev/react		40+ premium React upload components
@uploadkitdev/next		Next.js App Router handler + Express/Hono adapters
@uploadkitdev/mcp		Official MCP server for AI coding assistants
create-uploadkit-app		Scaffolder for new projects (Next, SvelteKit, Remix, Vite)

Component highlights

UploadKit ships 40+ components across 7 categories:

• Classics — UploadButton, UploadDropzone, UploadModal, FileList, FilePreview
• Premium dropzones — Glass (Vercel/Linear), Aurora (Apple), Terminal (Raycast), Brutal (Neo-brutalist), Minimal, Neon
• Specialty — UploadAvatar, UploadInlineChat (ChatG

... View full README on GitHub