AI Canvas

AI Canvas

Componentes React e Tailwind animados de código aberto, sistemas de design e templates.
Navegue, copie e envie. Ou deixe seu editor de IA instalá-los para você.

Navegue pelo catálogo ao vivo em aicanvas.me

Uma coleção crescente de componentes React animados, além de um sistema de design orientado por tokens e templates prontos. Cada componente chega como código-fonte real no seu projeto, com um prompt de remix para IA que funciona em qualquer ferramenta de codificação com IA. Núcleo aberto: a biblioteca gratuita é MIT, e o Premium é proprietário.

Instalação

Adicione qualquer componente ao seu projeto com um comando:

npx shadcn@latest add @aicanvas/task-cards

Começando um novo projeto? Inicialize primeiro, depois adicione:

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

Instalações com um comando usam uma conta gratuita do AI Canvas: sem login, o CLI escreve um pequeno arquivo placeholder em vez do componente. Cadastre-se gratuitamente e copie seu comando de instalação pessoal de qualquer página de componente. Não é necessário conta para ler o código: o código-fonte MIT completo de cada componente gratuito está aqui neste repositório.

Três formas de usar

Caminho	Comando ou ação	Melhor para
shadcn CLI	npx shadcn@latest add @aicanvas/<slug>	Inserir código aberto e finalizado diretamente no seu repositório
AI Canvas MCP	npx -y @aicanvas/mcp	Deixar seu editor de IA buscar e instalar componentes para você
Remix com IA	Copie o prompt completo de qualquer página de componente gratuito	Reconstruir um componente do seu jeito em qualquer ferramenta de codificação com IA

Navegue pelo catálogo completo e copie o comando exato de qualquer componente em aicanvas.me. pnpm dlx, yarn dlx e bunx também funcionam.

Por que AI Canvas

• Núcleo aberto, gratuito para começar. A biblioteca gratuita é licenciada sob MIT, então você pode usá-la em projetos pessoais e comerciais, modificá-la livremente e enviá-la sem atribuição. Componentes Premium, sistemas de design e templates são proprietários.
• Código-fonte completo, seu para guardar. Cada componente chega como código React e TypeScript real no seu codebase, não uma dependência de caixa-preta. Reestilize, estenda ou envie como está. É seu.
• Feito para fluxos de trabalho com IA. Instale com o shadcn CLI, conecte o MCP para seu agente instalar por você, ou entregue um prompt de remix que funciona em qualquer ferramenta de codificação com IA.
• Animado por padrão. Construído com Framer Motion e Tailwind CSS, pronto para o Next.js App Router ou qualquer setup React moderno. Peças 3D usam Three.js.

AI Canvas é gratuito para começar. O Premium desbloqueia sistemas de design, templates e componentes de código fechado.

Componentes em destaque

Spider Web Teia de seda interativa que reage ao seu cursor	Cube Carousel Cubo de fotos 3D girável com arrastar	Curious AI Orbe 3D de IA que se transforma e segue seu cursor	Ripple Type Texto SVG que ondula ao alternar
Product Card Deck Baralho de cartões arrastável com efeito de folhear	Glass Music Player Mini player de vidro com vinil giratório	Andromeda Button Botão de blueprint sci-fi, cinco variantes	Glass Dock Dock estilo macOS com ampliação do cursor

Navegue por todos os componentes em aicanvas.me.

Use com seu editor de IA (MCP)

Conecte o AI Canvas ao seu editor de IA e deixe seu agente buscar, inspecionar e instalar componentes para você. Economize tokens. Não comece do zero.

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

Ou adicione à sua configuração MCP:

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

Funciona com Claude Code, Codex, Cursor e outros editores compatíveis com MCP. O servidor é somente leitura e busca o registro ao vivo em tempo de execução, então novos componentes chegam ao seu agente logo após serem lançados. Ele retorna metadados e código-fonte publicados dos componentes.

Sistemas de design e templates

Além de componentes independentes, o AI Canvas inclui Andromeda, um sistema de design sci-fi e blueprint orientado por tokens, com templates prontos como Mission Control, Service Order, Resource Planning e Signal Room. Instalar um componente Andromeda traz seu código-fonte mais o pacote de tokens compartilhados do qual ele depende.

Veja em aicanvas.me/design-systems/andromeda.

Estrutura do repositório

Este repositório contém todo o código-fonte do AI Canvas: o site e cada componente gratuito. O código-fonte dos componentes está aqui, não apenas o site.

Caminho	O que contém
components-workspace/<slug>/	Cada componente gratuito: código-fonte index.tsx, prompt de remix prompts.ts, spec.md
design-systems/andromeda/	O código-fonte do sistema de design gratuito Andromeda: tokens, componentes, utilitários
app/	O site aicanvas.me (Next.js App Router)
scripts/generate-registry.mjs	Gera o JSON do registro shadcn a partir das fontes acima

Os arquivos de registro @aicanvas servidos em /r/*.json são gerados no momento da compilação a partir de components-workspace/ e design-systems/, então não há pasta registry/ versionada. Execute node scripts/generate-registry.mjs para produzi-los localmente.

Stack tecnológica

React e TypeScript, Tailwind CSS e Framer Motion. Construído para o Next.js App Router e funciona em qualquer setup React moderno. Componentes 3D usam Three.js.

Status do projeto

AI Canvas é um projeto mantido ativamente. Novos componentes, sistemas de design e templates são lançados regularmente. Se o AI Canvas economizar seu tempo, uma estrela ajuda mais construtores a encontrá-lo.

Contribuindo

AI Canvas é código aberto sob MIT. Issues, ideias e pull requests são bem-vindos. Abra uma issue para sugerir um componente ou relatar um bug.

Licença

A biblioteca gratuita é licenciada sob MIT. Use-a em projetos pessoais e comerciais, modifique-a livremente e envie-a sem atribuição. Veja LICENSE. Componentes Premium, sistemas de design e templates são proprietários sob a Licença Premium do AI Canvas.