UploadKit

개발자를 위한 파일 업로드. 아름답게.

오픈 소스 TypeScript SDK + 40개 이상의 프리미엄 React 컴포넌트 + Cloudflare R2 관리형 스토리지 — BYOS(자체 스토리지 가져오기) 모드를 지원하여 S3, R2, GCS 또는 Backblaze B2 버킷을 직접 사용할 수 있습니다. 5GB를 영구 무료로 제공합니다.

웹사이트 · 문서 · 대시보드 · Discord · 변경 로그

👁 npm: @uploadkitdev/react
👁 npm: @uploadkitdev/mcp
👁 Glama MCP score
👁 Awesome MCP Servers

빠른 시작 — 기존 프로젝트에 추가하기

대부분의 사용자는 이미 실행 중인 Next.js 앱에서 시작합니다. 세 단계면 충분합니다:

pnpm add @uploadkitdev/react @uploadkitdev/next

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

루트 레이아웃을 감싸고 드롭존을 배치하세요:

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

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

.env.local에 UPLOADKIT_API_KEY=uk_live_...를 설정하면 완료됩니다. 전체 가이드: docs.uploadkit.dev/docs/getting-started/quickstart.

또는 CLI 사용 (권장)

npx uploadkit init

프레임워크를 감지하고, 의존성을 설치하며, 라우트 핸들러를 생성하고, 레이아웃을 감싸는 작업을 한 번의 명령어로 수행합니다. 자세한 내용은 CLI 가이드를 참조하세요.

새 프로젝트를 시작하시나요?

npx create-uploadkit-app my-app

Next.js, SvelteKit, Remix, Vite용 템플릿을 제공합니다 — CLI 가이드를 참조하세요.

AI 어시스턴트 IDE를 사용하시나요?

UploadKit MCP 서버를 설치하고 Claude Code, Cursor, Windsurf 또는 Zed가 모든 것을 연결하도록 하세요:

npx -y @uploadkitdev/mcp

Related MCP server: mintlify-mcp

패키지

주요 컴포넌트

UploadKit은 7개 카테고리에 걸쳐 40개 이상의 컴포넌트를 제공합니다:

• Classics — UploadButton, UploadDropzone, UploadModal, FileList, FilePreview

• Premium dropzones — Glass (Vercel/Linear), Aurora (Apple), Terminal (Raycast), Brutal (Neo-brutalist), Minimal, Neon

• Specialty — UploadAvatar, UploadInlineChat (ChatGPT 스타일), UploadStepWizard (Stripe Checkout 스타일), UploadEnvelope (WeTransfer 스타일)

• Motion / Progress — UploadProgressRadial, UploadProgressLiquid, UploadProgressOrbit, UploadCloudRain, UploadBento, UploadParticles, UploadDataStream (Matrix/Warp 스타일)

• Galleries — 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

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

기술 스택

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 및 기여자들.

Maintenance

Resources

• NPM Package
• GitHub Repository
Need Help?Related Servers

Tools

• get_byos_configA
• get_componentA
• get_docA
• get_install_commandA
• get_quickstartA
• list_componentsA
• list_docsA
• scaffold_providerA