UploadKit

Загрузка файлов для разработчиков. Красиво.

TypeScript SDK с открытым исходным кодом + 40+ премиальных React-компонентов + управляемое хранилище на Cloudflare R2 — с режимом BYOS (Bring Your Own Storage), чтобы вы могли использовать свой собственный бакет S3, R2, GCS или Backblaze B2. 5 ГБ бесплатно навсегда.

Веб-сайт · Документация · Панель управления · 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!,
});

Оберните корневой макет (root layout) и добавьте зону перетаскивания (dropzone):

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

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

Установите UPLOADKIT_API_KEY=uk_live_... в .env.local, и всё готово. Полное руководство: 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?

Установите MCP-сервер UploadKit и позвольте Claude Code, Cursor, Windsurf или Zed настроить всё за вас:

npx -y @uploadkitdev/mcp

Related MCP server: mintlify-mcp

Пакеты

Основные компоненты

UploadKit поставляет 40+ компонентов в 7 категориях:

• Классика — UploadButton, UploadDropzone, UploadModal, FileList, FilePreview

• Премиальные зоны перетаскивания — Glass (Vercel/Linear), Aurora (Apple), Terminal (Raycast), Brutal (Neo-brutalist), 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 в качестве peer-зависимости, так и без неё.

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-native — 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