AI Canvas

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:

npx shadcn@latest add @aicanvas/task-cards

Starting a new project? Initialize first, then add:

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

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:

{ "registries": { "@aicanvas": { "url": "https://aicanvas.me/r/{name}.json", "params": { "token": "${AICANVAS_TOKEN}" } } } }

Every npx shadcn@latest add @aicanvas/<slug> 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/<slug>	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.