AI Canvas

AI Canvas

Componentes animados de React y Tailwind de código abierto, sistemas de diseño y plantillas.
Explora, copia y publica. O deja que tu editor de IA los instale por ti.

Explora el catálogo en vivo en aicanvas.me

Una colección en crecimiento de componentes animados de React, además de un sistema de diseño basado en tokens y plantillas listas para usar. Cada componente llega como código fuente real en tu proyecto, con un prompt de remezcla con IA que funciona en cualquier herramienta de codificación con IA. Núcleo abierto: la biblioteca gratuita es MIT, y Premium es propietaria.

Instalación

Añade cualquier componente a tu proyecto con un solo comando:

npx shadcn@latest add @aicanvas/task-cards

¿Empezando un proyecto nuevo? Inicializa primero, luego añade:

npx shadcn@latest init        # new projects only
npx shadcn@latest add @aicanvas/task-cards

Las instalaciones con un solo comando usan una cuenta gratuita de AI Canvas: si no has iniciado sesión, el CLI escribe un pequeño archivo de marcador de posición en lugar del componente. Regístrate gratis y luego copia tu comando de instalación personal desde cualquier página de componente. No necesitas cuenta para leer el código: el código fuente MIT completo de cada componente gratuito está aquí mismo en este repositorio.

Tres formas de usarlo

Ruta	Comando o acción	Mejor para
shadcn CLI	npx shadcn@latest add @aicanvas/<slug>	Insertar código de código abierto terminado directamente en tu repositorio
AI Canvas MCP	npx -y @aicanvas/mcp	Dejar que tu editor de IA busque e instale componentes por ti
Remezcla con IA	Copia el prompt completo desde cualquier página de componente gratuito	Reconstruir un componente a tu manera en cualquier herramienta de codificación con IA

Explora el catálogo completo y copia el comando exacto para cualquier componente en aicanvas.me. pnpm dlx, yarn dlx y bunx también funcionan.

Por qué AI Canvas

• Núcleo abierto, gratis para empezar. La biblioteca gratuita tiene licencia MIT, así que puedes usarla en proyectos personales y comerciales, modificarla libremente y publicarla sin atribución. Los componentes Premium, sistemas de diseño y plantillas son propietarios.
• Código fuente completo, tuyo para conservar. Cada componente llega como código real de React y TypeScript en tu base de código, no como una dependencia de caja negra. Restilízalo, extiéndelo o publícalo tal cual. Es tuyo.
• Diseñado para flujos de trabajo con IA. Instala con el CLI de shadcn, conecta el MCP para que tu agente instale por ti, o dale un prompt de remezcla que funcione en cualquier herramienta de codificación con IA.
• Animado por defecto. Construido con Framer Motion y Tailwind CSS, listo para el App Router de Next.js o cualquier configuración moderna de React. Las piezas 3D usan Three.js.

AI Canvas es gratis para empezar. Premium desbloquea sistemas de diseño, plantillas y componentes de código cerrado.

Componentes destacados

Telaraña Telaraña de seda interactiva que reacciona a tu cursor	Carrusel Cubo Cubo de fotos 3D que gira al arrastrar	IA Curiosa Orbe 3D de IA que se transforma y sigue tu cursor	Texto Ondulante Texto SVG que ondula al alternar
Mazo de Tarjetas de Producto Mazo de tarjetas arrastrables para pasar	Reproductor de Música de Vidrio Mini reproductor de vidrio con vinilo giratorio	Botón Andrómeda Botón de plano de ciencia ficción, cinco variantes	Base de Vidrio Base estilo macOS con aumento del cursor

Explora todos los componentes en aicanvas.me.

Úsalo con tu editor de IA (MCP)

Conecta AI Canvas a tu editor de IA y deja que tu agente busque, inspeccione e instale componentes por ti. Ahorra tokens. No empieces desde cero.

claude mcp add aicanvas -- npx -y @aicanvas/mcp

O añádelo a tu configuración de MCP:

{
  "mcpServers": {
    "aicanvas": {
      "command": "npx",
      "args": ["-y", "@aicanvas/mcp"]
    }
  }
}

Funciona con Claude Code, Codex, Cursor y otros editores compatibles con MCP. El servidor es de solo lectura y obtiene el registro en vivo en tiempo de ejecución, así que los componentes nuevos llegan a tu agente poco después de publicarse. Devuelve metadatos y código fuente de componentes publicados.

Sistemas de diseño y plantillas

Más allá de los componentes independientes, AI Canvas incluye Andrómeda, un sistema de diseño de ciencia ficción y planos basado en tokens, con plantillas listas como Mission Control, Service Order, Resource Planning y Signal Room. Instalar un componente de Andrómeda trae su código fuente junto con el paquete de tokens compartidos del que depende.

Míralo en aicanvas.me/design-systems/andromeda.

Estructura del repositorio

Este repositorio contiene el código fuente completo de AI Canvas: el sitio web y cada componente gratuito. El código fuente de los componentes vive aquí, no solo el sitio.

Ruta	Qué hay ahí
components-workspace/<slug>/	Cada componente gratuito: index.tsx código fuente, prompts.ts prompt de remezcla, spec.md
design-systems/andromeda/	El código fuente del sistema de diseño gratuito Andrómeda: tokens, componentes, utilidades
app/	El sitio web aicanvas.me (Next.js App Router)
scripts/generate-registry.mjs	Construye el JSON del registro de shadcn a partir de las fuentes anteriores

Los archivos de registro @aicanvas servidos en /r/*.json se generan en tiempo de compilación a partir de components-workspace/ y design-systems/, así que no hay carpeta registry/ verificada. Ejecuta node scripts/generate-registry.mjs para producirlos localmente.

Pila tecnológica

React y TypeScript, Tailwind CSS y Framer Motion. Construido para el App Router de Next.js y funciona en cualquier configuración moderna de React. Los componentes 3D usan Three.js.

Estado del proyecto

AI Canvas es un proyecto mantenido activamente. Se publican regularmente nuevos componentes, sistemas de diseño y plantillas. Si AI Canvas te ahorra tiempo, una estrella ayuda a que más creadores lo encuentren.

Contribuciones

AI Canvas es de código abierto bajo MIT. Se aceptan problemas, ideas y solicitudes de extracción. Abre un problema para sugerir un componente o reportar un error.

Licencia

La biblioteca gratuita tiene licencia MIT. Úsala en proyectos personales y comerciales, modifícala libremente y publícala sin atribución. Consulta LICENSE. Los componentes Premium, sistemas de diseño y plantillas son propietarios bajo la Licencia Premium de AI Canvas.