aicanvas

AI Canvas is an open-core registry that catalogs animated React components, page blocks, design systems, and templates. Its core feature is that it provides real, editable code: components are installed into your project as source code, rather than as black-box dependencies.

Main Capabilities

• Provides animated React components and composable page blocks (such as card groups, task boards, galleries, etc.).
• Components are built on Tailwind CSS v4, React 19, and Framer Motion; 3D components use Three.js.
• By default it targets the Next.js App Router, but it can also be used in any modern React environment.
• Each component page displays the complete source code, which can be read and copied for free without an account.
• Each component comes with a platform-agnostic remix prompt that can be pasted into any AI coding tool to rebuild the component your own way.

How to Use

1. Browse the complete catalog and copy the installation command for any component at aicanvas.me.
2. Install a component with a single command:npx shadcn@latest add @aicanvas/<slug>. pnpm dlx, yarn dlx, and bunx also work.
3. New projects must be initialized first, then components can be added.
4. Installation is tied to a free AI Canvas account. When not logged in, the CLI writes a placeholder file instead of the component, so you must authenticate first:
   • Sign up for free and copy the token from your account settings.
   • Put it in .env.local as AICANVAS_TOKEN.
   • Add the registry in the project's components.json (only once).
   • After that, every npx shadcn@latest add @aicanvas/<slug> will be authenticated. After logging in, each component page will also show a ready-made command with the token.
5. Integrate with AI editors via MCP: connect AI Canvas to an AI editor so agents can search, inspect, and install components. Supports Claude Code, Codex, Cursor, and other MCP-compatible editors. The MCP server is read-only and fetches the live registry at runtime, so new components become available to agents shortly after they are published. It returns metadata and source code for published components.

Use Cases

• Developers who need to quickly add animated components or page blocks to a React project.
• Teams that want to bring component source code into their own codebase and freely modify and extend it.
• Users who use AI coding tools (such as Claude Code, Codex, Cursor) and want to automatically install components via MCP.
• Individuals or commercial projects that need a free component library for commercial use without attribution.

Limitations and Notes

• Components are written based on Tailwind CSS v4 and will not render correctly on v3.
• A small number of components load display fonts via next/font/google ; when used outside Next.js, you need to replace it with your own font loader.
• The free library uses the MIT license, can be used for personal and commercial projects, can be freely modified, and requires no attribution. Premium components, design systems, and templates are under proprietary licenses and require separate authorization.
• After installation, the code belongs to you and will not update automatically; if you need the latest version, you must rerun the installation command.
• The repository does not include a checked-in registry folder;/r/*.json the registry files are generated at build time from components-workspace/ and design-systems/ , and you can run node scripts/generate-registry.mjs to generate them locally.
• Regarding pricing, the specific contents of premium components, platform support details, etc., no further information is currently provided in the materials.