UploadKit

Carga de archivos para desarrolladores. Con estilo.

SDK de TypeScript de código abierto + más de 40 componentes premium de React + almacenamiento gestionado en Cloudflare R2 — con modo BYOS (Trae tu propio almacenamiento) para que puedas usar tu propio bucket de S3, R2, GCS o Backblaze B2. 5 GB gratis para siempre.

Sitio web · Documentación · Panel de control · Discord · Registro de cambios

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

Inicio rápido — añadir a un proyecto existente

La mayoría de la gente llega aquí con una aplicación de Next.js ya en funcionamiento. Tres pasos:

pnpm add @uploadkitdev/react @uploadkitdev/next

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

Envuelve el diseño raíz (root layout) e inserta una zona de arrastre (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" />

Establece UPLOADKIT_API_KEY=uk_live_... en .env.local y listo. Tutorial completo: docs.uploadkit.dev/docs/getting-started/quickstart.

O usa la CLI (recomendado)

npx uploadkit init

Detecta tu framework, instala las dependencias, crea el manejador de rutas y envuelve tu diseño — todo en un solo comando. Consulta la guía de la CLI para más detalles.

¿Comenzando un nuevo proyecto?

npx create-uploadkit-app my-app

Plantillas para Next.js, SvelteKit, Remix y Vite — consulta la guía de la CLI.

¿Usas un IDE con asistente de IA?

Instala el servidor MCP de UploadKit y deja que Claude Code, Cursor, Windsurf o Zed configuren todo por ti:

npx -y @uploadkitdev/mcp

Related MCP server: mintlify-mcp

Paquetes

Aspectos destacados de los componentes

UploadKit incluye más de 40 componentes en 7 categorías:

• Clásicos — UploadButton, UploadDropzone, UploadModal, FileList, FilePreview

• Zonas de arrastre premium — Glass (Vercel/Linear), Aurora (Apple), Terminal (Raycast), Brutal (Neo-brutalist), Minimal, Neon

• Especializados — UploadAvatar, UploadInlineChat (estilo ChatGPT), UploadStepWizard (estilo Stripe Checkout), UploadEnvelope (estilo WeTransfer)

• Movimiento / Progreso — UploadProgressRadial, UploadProgressLiquid, UploadProgressOrbit, UploadCloudRain, UploadBento, UploadParticles, UploadDataStream (estilo Matrix/Warp)

• Galerías — UploadGalleryGrid, UploadPolaroid, UploadTimeline, UploadKanban, UploadStickyBoard

Todos tienen licencia MIT, modo oscuro integrado, son personalizables mediante propiedades personalizadas de CSS y funcionan con o sin motion como dependencia complementaria.

BYOS — Trae tu propio almacenamiento

Usa el mismo SDK con tu propio bucket — cero cambios en el frontend, las credenciales permanecen en el lado del servidor.

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

Proveedores compatibles: AWS S3 · Cloudflare R2 · Google Cloud Storage · Backblaze B2.

IA nativa — Servidor MCP

UploadKit incluye un servidor oficial del Protocolo de Contexto de Modelo para que Claude Code, Cursor, Windsurf, Zed, ChatGPT y Claude.ai puedan generar código de UploadKit con un conocimiento de primer nivel de cada componente y estructura.

Stdio (clientes IDE):

npx -y @uploadkitdev/mcp

HTTP remoto (web de ChatGPT / Claude.ai):

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

Configuración completa: docs.uploadkit.dev/docs/guides/mcp · Fuente: packages/mcp · Registro: io.github.drumst0ck/uploadkit

Estructura del 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)
 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

Stack tecnológico

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.

Estado

Versión 1.0 lanzada. Mantenimiento activo. La comunidad es bienvenida en Discord.

Licencia

MIT © Drumst0ck y colaboradores.

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