# UploadKit
**File uploads for developers. Beautifully.**
Open-source TypeScript SDK + 40+ premium React components + managed storage on Cloudflare R2 — with BYOS (Bring Your Own Storage) mode so you can use your own S3, R2, GCS, or Backblaze B2 bucket. 5 GB free forever.
[Website](https://uploadkit.dev) · [Docs](https://docs.uploadkit.dev) · [Dashboard](https://app.uploadkit.dev) · [Changelog](https://uploadkit.dev/changelog)
[](https://www.npmjs.com/package/@uploadkitdev/react) [](https://www.npmjs.com/package/@uploadkitdev/mcp) [](https://glama.ai/mcp/servers/drumst0ck/uploadkit) [](https://github.com/punkpeye/awesome-mcp-servers)
---
## Quickstart — add to an existing project
Most people land here with a Next.js app already running. Three steps:
```bash
pnpm add @uploadkitdev/react @uploadkitdev/next
```
Create `app/api/uploadkit/[...uploadkit]/route.ts`:
```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:
```tsx
// app/layout.tsx
import { UploadKitProvider } from '@uploadkitdev/react';
// {children}
// any page
import { UploadDropzone } from '@uploadkitdev/react';
//
```
Set `UPLOADKIT_API_KEY=uk_live_...` in `.env.local` and you're done. Full walkthrough: [docs.uploadkit.dev/docs/getting-started/quickstart](https://docs.uploadkit.dev/docs/getting-started/quickstart).
### Or use the CLI (recommended)
```bash
npx uploadkit init
```
Detects your framework, installs deps, creates the route handler, and wraps your layout — all in one command. See the [CLI guide](https://docs.uploadkit.dev/docs/guides/cli-existing-projects) for details.
### Starting a new project?
```bash
npx create-uploadkit-app my-app
```
Templates for **Next.js**, **SvelteKit**, **Remix**, and **Vite** — see the [CLI guide](https://docs.uploadkit.dev/docs/guides/cli).
### Using an AI-assistant IDE?
Install the [UploadKit MCP server](https://docs.uploadkit.dev/docs/guides/mcp) and let Claude Code, Cursor, Windsurf, or Zed wire the whole thing up for you:
```bash
npx -y @uploadkitdev/mcp
```
---
## Packages
| Package | Version | Description |
|---------|---------|-------------|
| [`@uploadkitdev/core`](https://www.npmjs.com/package/@uploadkitdev/core) |  | Framework-agnostic upload client (browser, Node, Edge) |
| [`@uploadkitdev/react`](https://www.npmjs.com/package/@uploadkitdev/react) |  | 40+ premium React upload components |
| [`@uploadkitdev/next`](https://www.npmjs.com/package/@uploadkitdev/next) |  | Next.js App Router handler + Express/Hono adapters |
| [`@uploadkitdev/mcp`](https://www.npmjs.com/package/@uploadkitdev/mcp) |  | Official MCP server for AI coding assistants |
| [`create-uploadkit-app`](https://www.npmjs.com/package/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` (ChatGPT-style), `UploadStepWizard` (Stripe Checkout-style), `UploadEnvelope` (WeTransfer-style)
- **Motion / Progress** — `UploadProgressRadial`, `UploadProgressLiquid`, `UploadProgressOrbit`, `UploadCloudRain`, `UploadBento`, `UploadParticles`, `UploadDataStream` (Matrix/Warp-style)
- **Galleries** — `UploadGalleryGrid`, `UploadPolaroid`, `UploadTimeline`, `UploadKanban`, `UploadStickyBoard`
All are MIT-licensed, dark mode out of the box, themeable via CSS custom properties, and work with or without `motion` as a peer dep.
## BYOS — Bring Your Own Storage
Use the same SDK against your own bucket — zero frontend changes, credentials stay server-side.
```ts
import { createUploadKitHandler, type FileRouter } from '@uploadkitdev/next';
import { createR2Storage } from '@uploadkitdev/next/byos';
const router = {
media: { maxFileSize: '8MB', maxFileCount: 4, allowedTypes: ['image/*'] },
} satisfies FileRouter;
export const { GET, POST } = createUploadKitHandler({
router,
storage: createR2Storage({
accountId: process.env.CLOUDFLARE_R2_ACCOUNT_ID!,
accessKeyId: process.env.CLOUDFLARE_R2_ACCESS_KEY_ID!,
secretAccessKey: process.env.CLOUDFLARE_R2_SECRET_ACCESS_KEY!,
bucket: process.env.CLOUDFLARE_R2_BUCKET!,
}),
});
```
Supported providers: **AWS S3** · **Cloudflare R2** · **Google Cloud Storage** · **Backblaze B2**.
## AI-native — MCP server
UploadKit ships an official [Model Context Protocol](https://modelcontextprotocol.io) server so Claude Code, Cursor, Windsurf, Zed, ChatGPT, and Claude.ai can generate UploadKit code with first-class knowledge of every component and scaffold.
**Stdio (IDE clients):**
```bash
npx -y @uploadkitdev/mcp
```
**Remote HTTP (ChatGPT / Claude.ai web):**
```
https://api.uploadkit.dev/api/v1/mcp
```
Full setup: [docs.uploadkit.dev/docs/guides/mcp](https://docs.uploadkit.dev/docs/guides/mcp) · Source: [`packages/mcp`](./packages/mcp) · Registry: [`io.github.drumst0ck/uploadkit`](https://registry.modelcontextprotocol.io)
## Monorepo layout
```
apps/
web Landing + pricing (uploadkit.dev)
docs Fumadocs site (docs.uploadkit.dev)
dashboard SaaS dashboard (app.uploadkit.dev)
api REST API + MCP remote endpoint (api.uploadkit.dev)
packages/
core @uploadkitdev/core
react @uploadkitdev/react
next @uploadkitdev/next
mcp @uploadkitdev/mcp (stdio MCP server)
mcp-core shared MCP tool surface (internal)
create-uploadkit-app scaffolder for new projects
db MongoDB models
emails React Email templates
shared types, errors, utilities
ui dashboard components
config shared tsconfig / eslint / tailwind base
```
## Tech stack
Next.js 16 · React 19 · Tailwind CSS v4 · TypeScript 5 · MongoDB + Mongoose · Cloudflare R2 · Auth.js v5 · Stripe · Resend + React Email · Fumadocs · Turborepo · pnpm · Changesets.
## Status
Version 1.0 shipped. Actively maintained. Issues and contributions are welcome on [GitHub](https://github.com/drumst0ck/uploadkit).
## License
MIT © [Drumst0ck](https://github.com/drumst0ck) and contributors.