UploadKit

Install

pnpm add @uploadkitdev/react @uploadkitdev/next

Drop it in

import { UploadDropzone } from '@uploadkitdev/react';
import '@uploadkitdev/react/styles.css';

export default function Page() {
  return <UploadDropzone route="media" />;
}

That's it. You get a premium dropzone, dark mode, themeable via CSS variables, type-safe end-to-end.

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

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.

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 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):

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 · Source: packages/mcp · Registry: io.github.drumst0ck/uploadkit

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)
  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. Community welcome on Discord.

License

MIT © Drumst0ck and contributors.