llms.txt
+128 −100
− > AI Canvas is an open-core, shadcn-compatible registry of 87 animated React components, design systems, and templates built with Tailwind CSS and Motion. The free library is MIT, and Premium components, design systems, and templates are proprietary. Many components ship with a comprehensive AI remix prompt, so developers can install the code directly or recreate their own variation in any AI builder. On free components that prompt is public in full; on premium components and blocks only part of− - [Homepage](https://aicanvas.me): Browse all components.− - [All components](https://aicanvas.me/components): Full component list.− - [About](https://aicanvas.me/about): About AI Canvas.− - [Registry index](https://aicanvas.me/r/registry.json): Machine-readable registry index.− One-command installs require a free AI Canvas account. Signed out, the command still exits 0 but writes a small placeholder file titled "(free account required)" instead of the real component. Check for that title before reporting success. Premium components, templates, and the design-system installs marked Premium below additionally require a Premium subscription.− AI agents can browse and install AI Canvas components through the official MCP server, [@aicanvas/mcp on npm](https://www.npmjs.com/package/@aicanvas/mcp). Run it with `npx -y @aicanvas/mcp` (stdio transport). It exposes read-only tools: list_categories, list_components, search_components, get_component, get_component_props, get_install_command, list_systems, get_system, list_templates, get_template, validate_usage, compose_page, get_audit_checklist. The documented props of every component are a− - [Andromeda Legacy](https://aicanvas.me/design-systems/andromeda): Design system (tokens + components). Browse free: https://aicanvas.me/design-systems/andromeda/system. Install (free account): `npx shadcn@latest add @aicanvas/andromeda-<component-name>` (one component, for example `andromeda-alert`; Button is `andromeda-button-system`), `npx shadcn@latest add @aicanvas/andromeda` (every component). Install (no account needed): `npx shadcn@latest add @aicanvas/andromeda-tokens` (foundation only− - [Mission Control](https://aicanvas.me/design-systems/andromeda/templates/mission-control): Premium Dashboard template built entirely from Andromeda Legacy components. Install (Premium, requires an AI Canvas token): `npx shadcn@latest add @aicanvas/andromeda-mission-control`− - [Service Order](https://aicanvas.me/design-systems/andromeda/templates/service-order): Premium CRM template built entirely from Andromeda Legacy components. Install (Premium, requires an AI Canvas token): `npx shadcn@latest add @aicanvas/andromeda-service-order`− - [Resource Planning](https://aicanvas.me/design-systems/andromeda/templates/resource-planning): Premium Scheduling template built entirely from Andromeda Legacy components. Install (Premium, requires an AI Canvas token): `npx shadcn@latest add @aicanvas/andromeda-resource-planning`− - [Signal Room](https://aicanvas.me/design-systems/andromeda/templates/signal-room): Premium Media template built entirely from Andromeda Legacy components. Install (Premium, requires an AI Canvas token): `npx shadcn@latest add @aicanvas/andromeda-signal-room`− - [Andromeda Pro](https://aicanvas.me/design-systems/andromeda-pro): Design system (tokens + components). Browse free: https://aicanvas.me/design-systems/andromeda-pro/components. Install (Premium, requires an AI Canvas token): `npx shadcn@latest add @aicanvas/andromeda-pro-<component-name>` (one component, for example `andromeda-pro-accordion`), `npx shadcn@latest add @aicanvas/andromeda-pro-tokens` (foundation only: tokens, utilities, system icon), `npx shadcn@latest add @aicanvas/andromeda-pr− - [Diamond Grid](https://aicanvas.me/components/diamond-grid): A faint canvas grid of diamonds. Seeded sparks send light outward until fronts meet. Install (free account): `npx shadcn@latest add @aicanvas/diamond-grid`. Registry: https://aicanvas.me/r/diamond-grid.json− - [Noise Field](https://aicanvas.me/components/noise-field): An animated flow field background. A grid of arrows driven by layered sine-wave noise drifts like wind. Hover and they turn to point at your cursor. Install (free account): `npx shadcn@latest add @aicanvas/noise-field`. Registry: https://aicanvas.me/r/noise-field.json− - [Spider Web](https://aicanvas.me/components/particle-constellation): An animated spider web background. Silk strands bow slowly at rest, and hovering pushes each node so it bounces back under tension. Install (free account): `npx shadcn@latest add @aicanvas/particle-constellation`. Registry: https://aicanvas.me/r/particle-constellation.json− - [Magnetic Logo Cluster](https://aicanvas.me/components/magnetic-logo-cluster): An interactive swarm of your logo. Marks fly in from off-screen, drift endlessly, and bend toward the cursor. Install (free account): `npx shadcn@latest add @aicanvas/magnetic-logo-cluster`. Registry: https://aicanvas.me/r/magnetic-logo-cluster.json− - [Magnetic Dots](https://aicanvas.me/components/magnetic-dots): An interactive dot background. A dense grid of dots is magnetically pulled toward your cursor, snapping back with an elastic bounce. Install (free account): `npx shadcn@latest add @aicanvas/magnetic-dots`. Registry: https://aicanvas.me/r/magnetic-dots.json− - [Wireframe Globe](https://aicanvas.me/components/sphere-lines): An animated wireframe globe background. A narrow wave band drifts slowly across the surface, and hovering ripples the lines under your cursor. Install (free account): `npx shadcn@latest add @aicanvas/sphere-lines`. Registry: https://aicanvas.me/r/sphere-lines.json− - [Particle Sphere](https://aicanvas.me/components/particle-sphere): A 3D particle background built with Three.js. 9,000 particles sit on a slowly spinning sphere in warm gold and cool silver. Install (free account): `npx shadcn@latest add @aicanvas/particle-sphere`. Registry: https://aicanvas.me/r/particle-sphere.json− - [Dot Grid](https://aicanvas.me/components/dot-grid): An animated dot grid background. Hovering lights up nearby dots with a smooth glow and an organic fade. Install (free account): `npx shadcn@latest add @aicanvas/dot-grid`. Registry: https://aicanvas.me/r/dot-grid.json− - [X Grid](https://aicanvas.me/components/x-grid): An animated X grid background. Marks illuminate and connect to their neighbors with constellation lines as your cursor passes. Install (free account): `npx shadcn@latest add @aicanvas/x-grid`. Registry: https://aicanvas.me/r/x-grid.json− - [Grain Background](https://aicanvas.me/components/noise-bg): A grain background of randomly scattered dots. Hover to illuminate them with a soft Gaussian glow and organic connection lines. Install (free account): `npx shadcn@latest add @aicanvas/noise-bg`. Registry: https://aicanvas.me/r/noise-bg.json− - [Bubble Field](https://aicanvas.me/components/bubble-field): An animated bubble background. A monochrome grid of outline circles bursts near the cursor, expanding and fading, then reforming. Install (free account): `npx shadcn@latest add @aicanvas/bubble-field`. Registry: https://aicanvas.me/r/bubble-field.json− - [Grid Lines](https://aicanvas.me/components/grid-lines): A grid background of dots connected by thin lines. The cursor lights a radial glow and bulges the grid outward like a lens as it moves. Install (free account): `npx shadcn@latest add @aicanvas/grid-lines`. Registry: https://aicanvas.me/r/grid-lines.json− - [Distortion Grid](https://aicanvas.me/components/distortion-grid): An animated grid background. Thin lines undulate in slow sweeping waves, and hovering repels the grid fabric outward from your cursor. Install (free account): `npx shadcn@latest add @aicanvas/distortion-grid`. Registry: https://aicanvas.me/r/distortion-grid.json− - [Wave Lines](https://aicanvas.me/components/wave-lines): An animated line background. Dense vertical lines ripple with two layered sine waves, bunching and breathing. Hover to send waves across the canvas. Install (free account): `npx shadcn@latest add @aicanvas/wave-lines`. Registry: https://aicanvas.me/r/wave-lines.json− - [Scroll Wipe Gallery](https://aicanvas.me/components/scroll-wipe-gallery): A full-bleed, scroll-driven photo gallery. Each photo wipes in from a different edge. Install (free account): `npx shadcn@latest add @aicanvas/scroll-wipe-gallery`. Registry: https://aicanvas.me/r/scroll-wipe-gallery.json− - [3D Gem Pricing Section](https://aicanvas.me/components/3d-gem-pricing-section): Three pricing cards, each topped by a still faceted gem that grows and spins on hover. Install (Premium, requires an AI Canvas token): `npx shadcn@latest add @aicanvas/3d-gem-pricing-section`. Registry: https://aicanvas.me/r/3d-gem-pricing-section.json− - [Curved Frame Carousel](https://aicanvas.me/components/curved-frame-carousel): A fixed frame masks a drifting photo deck. Drag it and panels hinge into 3D at the edge. Install (Premium, requires an AI Canvas token): `npx shadcn@latest add @aicanvas/curved-frame-carousel`. Registry: https://aicanvas.me/r/curved-frame-carousel.json− - [Perspective Showcase Hero](https://aicanvas.me/components/perspective-showcase-hero): A hero section pairing a split editorial header with an endless CSS 3D carousel, no WebGL: cards tilt continuously with distance from the centre so the row reads as one arc, images counter-zoom inside their frames, and one velocity loop drives drift, drag, wheel, and keyboard input. Fully configurable via typed props. Install (Premium, requires an AI Canvas token): `npx shadcn@latest add @aicanvas/perspectiv− - [Fluid Simulation Hero](https://aicanvas.me/components/fluid-simulation-hero): A full bleed hero on a real time WebGL fluid simulation. The surface blooms into being on load, and the pointer stirs the dye. Install (Premium, requires an AI Canvas token): `npx shadcn@latest add @aicanvas/fluid-simulation-hero`. Registry: https://aicanvas.me/r/fluid-simulation-hero.json− - [Expanding Tabs](https://aicanvas.me/components/expanding-tabs): A monochrome tab bar of icon circles. Click one and it expands into a labeled pill. Install (free account): `npx shadcn@latest add @aicanvas/expanding-tabs`. Registry: https://aicanvas.me/r/expanding-tabs.json− - [Glass User Menu](https://aicanvas.me/components/glass-user-menu): Frosted glass user avatar trigger with animated dropdown, grouped menu items, and Log Out. Install (free account): `npx shadcn@latest add @aicanvas/glass-user-menu`. Registry: https://aicanvas.me/r/glass-user-menu.json− - [Glass Sidebar](https://aicanvas.me/components/glass-sidebar): Collapsible glassmorphism sidebar with icon-only and full label states, spring-animated expand and collapse. Install (free account): `npx shadcn@latest add @aicanvas/glass-sidebar`. Registry: https://aicanvas.me/r/glass-sidebar.json− - [Glass Dock](https://aicanvas.me/components/glass-dock): Glassmorphism macOS-style dock with cursor-proximity magnification. Icons scale with spring physics as the mouse approaches. Install (free account): `npx shadcn@latest add @aicanvas/glass-dock`. Registry: https://aicanvas.me/r/glass-dock.json− - [Glass Tab Bar](https://aicanvas.me/components/glass-tab-bar): Frosted glass pill tab bar with a sliding active indicator. Edge tabs snap flush to the container wall. Install (free account): `npx shadcn@latest add @aicanvas/glass-tab-bar`. Registry: https://aicanvas.me/r/glass-tab-bar.json− - [Glass Navbar](https://aicanvas.me/components/glass-navbar): Frosted glass navigation bar with animated active tab indicator, ambient color blobs, and spring-physics entrance. Install (free account): `npx shadcn@latest add @aicanvas/glass-navbar`. Registry: https://aicanvas.me/r/glass-navbar.json− - [Delete Button](https://aicanvas.me/components/delete-button): A red button that starts a five-second delete countdown, with a one-tap undo. Install (free account): `npx shadcn@latest add @aicanvas/delete-button`. Registry: https://aicanvas.me/r/delete-button.json− - [Glass Toggle](https://aicanvas.me/components/glass-toggle): On/off toggles with glass housing and liquid-feel spring animation. Track color transitions smoothly. Install (free account): `npx shadcn@latest add @aicanvas/glass-toggle`. Registry: https://aicanvas.me/r/glass-toggle.json+ > AI Canvas is the design layer for AI coding agents: design systems your agent builds with and you reshape to your project, plus 98 standalone React components and blocks that fit any of them, all installed as editable source with shadcn or MCP. The free components and Andromeda Legacy are MIT; Premium components, Andromeda Pro, its templates and the AI Brain are proprietary, and the Line icons are free under the AI Canvas Premium License, not MIT, with a one-line credit kept in the code. Many + Component and design-system links below point at each page's markdown version (the page URL plus `.md`): description, install command, props and, where the page shows one, the remix prompt. These pages also answer in markdown at their own URL when the request sends `Accept: text/markdown`: the home page (or https://aicanvas.me/index.md), /mcp (or https://aicanvas.me/mcp.md), /components, each /components/<slug>, each /design-systems/<system> and each /design-systems/<system>/<component>. Other p+ - [Homepage](https://aicanvas.me): Design systems and standalone React components for AI coding agents.+ - [All components](https://aicanvas.me/components.md): Every one of the 98 standalone shadcn components and blocks for React, by category, as markdown.+ - [About](https://aicanvas.me/about): Learn how AI Canvas works with Claude Code, Cursor, and Codex.+ - [Docs](https://aicanvas.me/docs): Installation, components.json, design systems, the AI Brain, the MCP server and the files for agents.+ - [Registry index](https://aicanvas.me/r/registry.json): Machine-readable registry index (see Read API below).+ One-command installs require a free AI Canvas account (Line icons excepted: no account needed). Signed out, the command still exits 0 but writes a small placeholder file titled "(free account required)" instead of the real component. Check for that title before reporting success. Premium components and every install marked Premium below additionally require Premium.+ AI agents can browse AI Canvas and get install commands through the official, read-only MCP server, [@aicanvas/mcp on npm](https://www.npmjs.com/package/@aicanvas/mcp). Run it with `npx -y @aicanvas/mcp` (stdio transport). It exposes read-only tools: list_categories, list_components, search_components, get_component, get_component_props, get_install_command, list_systems, get_system, list_templates, get_template, validate_usage, get_audit_checklist, search_icons, get_icon_install. The documented+ ## Read API+ Public JSON over plain GET: no key, no account, read-only, cached for 5 minutes. Use these to list and search the catalog without the MCP server.+ - [registry.json](https://aicanvas.me/r/registry.json): The shadcn registry index. `items[]` lists every installable item with `name` (the install slug), `type` (`registry:ui` component, `registry:block` page section, `registry:lib` helper), `title`, `description`, `dependencies` and `files` (target paths only, no source).+ - [aicanvas-mcp.json](https://aicanvas.me/r/aicanvas-mcp.json): The catalog the MCP server reads. `components[]` carry `slug`, `name`, `description`, `categories`, `tags`, `image`, `dependencies`, `homepageUrl` and `installCommand`; it also lists `systems`, `systemComponents`, `templates` and `brains`.+ - [aicanvas-props.json](https://aicanvas.me/r/aicanvas-props.json): `props` maps a component's slug to its documented prop tables. Components that take no props are absent.+ - Per-item files, `https://aicanvas.me/r/<slug>.json`, are the install payloads the shadcn CLI fetches. They need the token described under Install: without it, a free item returns a placeholder titled "(free account required)" and a Premium item returns a Premium placeholder, both with no source.+ - Markdown pages, `https://aicanvas.me/components/<slug>.md` and `https://aicanvas.me/components.md`, are the readable form of the same catalog.+ ## Icons+ - [Icons](https://aicanvas.me/icons): 820 React icons in four styles: Line, Duotone, Solid and Solid duotone. Each icon installs as one editable file plus a shared IconBase runtime in components/icons/.+ - Install one icon (no account needed): `npx shadcn@latest add @aicanvas/icon-<name>`, for example `icon-search`. The other styles add a suffix (Premium, requires an AI Canvas token): `icon-<name>-duotone`, `icon-<name>-solid`, `icon-<name>-solid-duotone`.+ - Install every Line icon at once (no account needed): `npx shadcn@latest add @aicanvas/icons`.+ - Licence: Line icons are free under the AI Canvas Premium License, not MIT. Without Premium, keep the one-line AI Canvas notice at the top of each Line icon file and name AI Canvas in your credits or licence file when you publish source; Premium members need neither.+ - Use: `import { Search } from '@/components/icons/search'`, then `<Search size={20} />`. The export is the name in PascalCase plus the style (`SearchDuotone`, `SearchSolid`, `SearchSolidDuotone`). Props: size, color, weight (thin, light, regular, bold or extrabold; default regular; Line and Duotone only). `<IconProvider weight="...">` from components/icons/IconBase sets the defaults for every icon inside it.+ - [Icon catalog](https://aicanvas.me/r/icons-index.json) (no account needed): every icon's name, category and tags as JSON. The MCP tools search_icons and get_icon_install read it.+ - [Andromeda Legacy](https://aicanvas.me/design-systems/andromeda.md): Design system (tokens + components). Browse free: https://aicanvas.me/design-systems/andromeda/system. Install (free account): `npx shadcn@latest add @aicanvas/andromeda-<component-name>` (one component, for example `andromeda-alert`; Button is `andromeda-button-system`), `npx shadcn@latest add @aicanvas/andromeda` (every component). Install (no account needed): `npx shadcn@latest add @aicanvas/andromeda-tokens` (foundation o+ - [Mission Control](https://aicanvas.me/design-systems/andromeda/templates/mission-control): Free Dashboard template built entirely from Andromeda Legacy components. Install (free account): `npx shadcn@latest add @aicanvas/andromeda-mission-control`+ - [Service Order](https://aicanvas.me/design-systems/andromeda/templates/service-order): Free CRM template built entirely from Andromeda Legacy components. Install (free account): `npx shadcn@latest add @aicanvas/andromeda-service-order`+ - [Resource Planning](https://aicanvas.me/design-systems/andromeda/templates/resource-planning): Free Scheduling template built entirely from Andromeda Legacy components. Install (free account): `npx shadcn@latest add @aicanvas/andromeda-resource-planning`+ - [Signal Room](https://aicanvas.me/design-systems/andromeda/templates/signal-room): Free Media template built entirely from Andromeda Legacy components. Install (free account): `npx shadcn@latest add @aicanvas/andromeda-signal-room`+ - [Andromeda Pro](https://aicanvas.me/design-systems/andromeda-pro.md): Design system (tokens + components). Browse free: https://aicanvas.me/design-systems/andromeda-pro/components. Install (Premium, requires an AI Canvas token): `npx shadcn@latest add @aicanvas/andromeda-pro-<component-name>` (one component, for example `andromeda-pro-accordion`), `npx shadcn@latest add @aicanvas/andromeda-pro-tokens` (foundation only: tokens, utilities, system icon), `npx shadcn@latest add @aicanvas/andromeda+ - [Diamond Grid](https://aicanvas.me/components/diamond-grid.md): A faint canvas grid of diamonds. Seeded sparks send light outward until fronts meet. Install (free account): `npx shadcn@latest add @aicanvas/diamond-grid`. Registry: https://aicanvas.me/r/diamond-grid.json+ - [Noise Field](https://aicanvas.me/components/noise-field.md): An animated flow field background. A grid of arrows driven by layered sine-wave noise drifts like wind. Hover and they turn to point at your cursor. Install (free account): `npx shadcn@latest add @aicanvas/noise-field`. Registry: https://aicanvas.me/r/noise-field.json+ - [Spider Web](https://aicanvas.me/components/particle-constellation.md): An animated spider web background. Silk strands bow slowly at rest, and hovering pushes each node so it bounces back under tension. Install (free account): `npx shadcn@latest add @aicanvas/particle-constellation`. Registry: https://aicanvas.me/r/particle-constellation.json+ - [Magnetic Logo Cluster](https://aicanvas.me/components/magnetic-logo-cluster.md): An interactive swarm of your logo. Marks fly in from off-screen, drift endlessly, and bend toward the cursor. Install (free account): `npx shadcn@latest add @aicanvas/magnetic-logo-cluster`. Registry: https://aicanvas.me/r/magnetic-logo-cluster.json+ - [Magnetic Dots](https://aicanvas.me/components/magnetic-dots.md): An interactive dot background. A dense grid of dots is magnetically pulled toward your cursor, snapping back with an elastic bounce. Install (free account): `npx shadcn@latest add @aicanvas/magnetic-dots`. Registry: https://aicanvas.me/r/magnetic-dots.json+ - [Wireframe Globe](https://aicanvas.me/components/sphere-lines.md): An animated wireframe globe background. A narrow wave band drifts slowly across the surface, and hovering ripples the lines under your cursor. Install (free account): `npx shadcn@latest add @aicanvas/sphere-lines`. Registry: https://aicanvas.me/r/sphere-lines.json+ - [Particle Sphere](https://aicanvas.me/components/particle-sphere.md): A 3D particle background built with Three.js. 9,000 particles sit on a slowly spinning sphere in warm gold and cool silver. Install (free account): `npx shadcn@latest add @aicanvas/particle-sphere`. Registry: https://aicanvas.me/r/particle-sphere.json+ - [Dot Grid](https://aicanvas.me/components/dot-grid.md): An animated dot grid background. Hovering lights up nearby dots with a smooth glow and an organic fade. Install (free account): `npx shadcn@latest add @aicanvas/dot-grid`. Registry: https://aicanvas.me/r/dot-grid.json+ - [X Grid](https://aicanvas.me/components/x-grid.md): An animated X grid background. Marks illuminate and connect to their neighbors with constellation lines as your cursor passes. Install (free account): `npx shadcn@latest add @aicanvas/x-grid`. Registry: https://aicanvas.me/r/x-grid.json+ - [Grain Background](https://aicanvas.me/components/noise-bg.md): A grain background of randomly scattered dots. Hover to illuminate them with a soft Gaussian glow and organic connection lines. Install (free account): `npx shadcn@latest add @aicanvas/noise-bg`. Registry: https://aicanvas.me/r/noise-bg.json+ - [Bubble Field](https://aicanvas.me/components/bubble-field.md): An animated bubble background. A monochrome grid of outline circles bursts near the cursor, expanding and fading, then reforming. Install (free account): `npx shadcn@latest add @aicanvas/bubble-field`. Registry: https://aicanvas.me/r/bubble-field.json
Showing the first 40 of each.