UploadKit

開発者のためのファイルアップロード。美しく。

オープンソースのTypeScript SDK + 40種類以上のプレミアムReactコンポーネント + Cloudflare R2によるマネージドストレージ。BYOS（Bring Your Own Storage：独自のストレージを持ち込む）モードにより、独自のS3、R2、GCS、またはBackblaze B2バケットを使用可能です。5GBまで永久無料。

ウェブサイト · ドキュメント · ダッシュボード · 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変数によるテーマ設定、エンドツーエンドの型安全性が手に入ります。

パッケージ

コンポーネントのハイライト

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

モノレポ構成

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。

ステータス

バージョン1.0リリース済み。活発にメンテナンスされています。コミュニティへの参加はDiscordへ。

ライセンス

MIT © Drumst0ck および貢献者。