UploadKit

Name: Uploadkit
Author: drumst0ck

为开发者打造的文件上传工具。优雅且美观。

开源 TypeScript SDK + 40 多个高级 React 组件 + Cloudflare R2 托管存储 — 支持 BYOS（自带存储）模式，因此您可以使用自己的 S3、R2、GCS 或 Backblaze B2 存储桶。5 GB 永久免费。

网站 · 文档 · 仪表盘 · Discord · 更新日志

安装

pnpm add @uploadkitdev/react @uploadkitdev/next

快速接入

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

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

就是这样。您将获得一个高级拖拽上传区、深色模式、可通过 CSS 变量进行主题定制，且端到端类型安全。

软件包

软件包	版本	描述
`@uploadkitdev/core`		框架无关的上传客户端（浏览器、Node、Edge）
`@uploadkitdev/react`		40 多个高级 React 上传组件
`@uploadkitdev/next`		Next.js App Router 处理程序 + Express/Hono 适配器
`@uploadkitdev/mcp`		AI 编码助手的官方 MCP 服务器

组件亮点

UploadKit 提供了涵盖 7 个类别的 40 多个组件：

经典组件 — UploadButton, UploadDropzone, UploadModal, FileList, FilePreview
高级拖拽区 — Glass (Vercel/Linear 风格), Aurora (Apple 风格), Terminal (Raycast 风格), Brutal (新野兽派风格), Minimal, Neon
特色组件 — UploadAvatar, UploadInlineChat (ChatGPT 风格), UploadStepWizard (Stripe Checkout 风格), UploadEnvelope (WeTransfer 风格)
动效 / 进度 — UploadProgressRadial, UploadProgressLiquid, UploadProgressOrbit, UploadCloudRain, UploadBento, UploadParticles, UploadDataStream (Matrix/Warp 风格)
画廊 — UploadGalleryGrid, UploadPolaroid, UploadTimeline, UploadKanban, UploadStickyBoard

所有组件均采用 MIT 许可，开箱即用支持深色模式，可通过 CSS 自定义属性进行主题定制，并且可以在有或没有 motion 作为对等依赖的情况下工作。

BYOS — 自带存储

使用相同的 SDK 对接您自己的存储桶 — 前端无需任何更改，凭据保留在服务器端。

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!,
  }),
});

支持的提供商：AWS S3 · Cloudflare R2 · Google Cloud Storage · Backblaze B2。

AI 原生 — MCP 服务器

UploadKit 提供了官方的 Model Context Protocol 服务器，以便 Claude Code、Cursor、Windsurf、Zed、ChatGPT 和 Claude.ai 能够生成具备每个组件和脚手架一流知识的 UploadKit 代码。

Stdio (IDE 客户端):

npx -y @uploadkitdev/mcp

远程 HTTP (ChatGPT / Claude.ai 网页版):

https://api.uploadkit.dev/api/v1/mcp

完整设置：docs.uploadkit.dev/docs/guides/mcp · 源码：packages/mcp · 注册表：io.github.drumst0ck/uploadkit

Monorepo 布局

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

技术栈

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。