aicanvas-me/aicanvas

Finished Components, Not Headless Primitives
A growing collection of animated React components and composed page blocks, installed as real source code in your project rather than as a dependency.
 
 
 
 
 
Install · Components · Blocks · MCP · Repo layout · FAQ · License
Install
Add any component to your project with one command:
Starting a new project? Initialize first, then add:
Installs are tied to a free AI Canvas account. Signed out, the CLI writes a small placeholder file instead of the component, so authenticate once first:
1. Sign up free and copy your token from account settings.
2. Put it in .env.local as AICANVAS_TOKEN.
3. Add the registry to your project's components.json, once:
Every npx shadcn@latest add @aicanvas/ is authenticated after that. Each component page also shows a ready tokenized command when you are signed in.
No account is needed to read the code: every component page shows its full source, free to read and copy.
Requirements
Tailwind CSS **v4**, React 19 and Framer Motion. Components are written against Tailwind v4 tokens and will not render correctly on v3. The Next.js App Router is the default target, not a requirement.
Three ways to use it
| Path | Command or action | Best for |
| --- | --- | --- |
| **shadcn CLI** | npx shadcn@latest add @aicanvas/ | Dropping finished, open-source code straight into your repo |
| **AI Canvas MCP** | npx -y @aicanvas/mcp | Letting your AI editor search and install components for you |
| **Remix with AI** | Copy the full prompt from any free component page | Rebuilding a component your way in any AI coding tool |
Browse the full catalog and copy the exact command for any component at aicanvas.me. pnpm dlx, yarn dlx, and bunx work too.
Why AI Canvas
- **MIT licensed.** The free library is MIT, so you can use it in personal and commercial projects, modify it freely, and ship it without attribution. Premium components, design systems, and templates are proprietary.
- **Full source, yours to keep.** Every component arrives as real React and TypeScript code in your codebase, not a black-box dependency. Restyle it, extend it, or ship it as is. It is yours.
- **Built for AI workflows.** Install with the shadcn CLI, connect the MCP so your agent installs for you, or hand it a remix prompt that works in any AI coding tool.
- **Animated by default.** Built with Framer Motion and Tailwind CSS, ready for the Next.js App Router or any modern React setup. 3D pieces use Three.js.
Components
Browse all components at aicanvas.me
Blocks
Composed, multi-component page sections: card decks, task boards, galleries. Same install, same MIT license, just a larger unit of work than a single component.
Browse all blocks at aicanvas.me
Use it with your AI editor (MCP)
Connect AI Canvas to your AI editor and let your agent search, inspect, and install components for you. Save tokens. Do not start from scratch.
Or add it to your MCP config:
Works with Claude Code, Codex, Cursor, and other MCP-compatible editors. The server is read-only and fetches the live registry at runtime, so new components reach your agent shortly after they ship. It returns published component metadata and source.