Installs all 119 components. Without our CLI, run instead.
aicanvas publishes a shadcn registry at aicanvas.me, with 119 components installable through the shadcn CLI.
Copy a prompt for your agent, copy the install command, or open the docs that ship it.
Three AI job card stacks with swipe-to-cycle. Brand logos, bookmark toggle, springs. Free account required to install; source is free to read.
Andromeda Alert component. Install just this piece. Tokens and any sibling components are pulled in automatically. Free account required to install; source is free to read.
Andromeda Avatar component. Install just this piece. Tokens and any sibling components are pulled in automatically. Free account required to install; source is free to read.
Andromeda Badge component. Install just this piece. Tokens and any sibling components are pulled in automatically. Free account required to install; source is free to read.
A sci-fi / blueprint-aesthetic button with five variants (default, outline, ghost, destructive, link), three sizes (small, medium, large), optional leading icon, and full hover / focus / active / disabled state coverage. Transparent hairline surfaces sit on a near-black canvas, with an electric-blue accent that brightens and glows on interaction. Free account required to install; source is free to read.
Andromeda Button component. Install just this piece. Tokens and any sibling components are pulled in automatically. Free account required to install; source is free to read.
Andromeda Card component. Install just this piece. Tokens and any sibling components are pulled in automatically. Free account required to install; source is free to read.
Andromeda Checkbox component. Install just this piece. Tokens and any sibling components are pulled in automatically. Free account required to install; source is free to read.
Andromeda Corner Markers component. Install just this piece. Tokens and any sibling components are pulled in automatically. Free account required to install; source is free to read.
Andromeda Data Table component. Install just this piece. Tokens and any sibling components are pulled in automatically. Free account required to install; source is free to read.
Andromeda Date Range Picker component. Install just this piece. Tokens and any sibling components are pulled in automatically. Free account required to install; source is free to read.
Andromeda Drawer component. Install just this piece. Tokens and any sibling components are pulled in automatically. Free account required to install; source is free to read.
Andromeda Empty State component. Install just this piece. Tokens and any sibling components are pulled in automatically. Free account required to install; source is free to read.
Andromeda Gauge component. Install just this piece. Tokens and any sibling components are pulled in automatically. Free account required to install; source is free to read.
Andromeda Heat Grid component. Install just this piece. Tokens and any sibling components are pulled in automatically. Free account required to install; source is free to read.
Andromeda Icon Button component. Install just this piece. Tokens and any sibling components are pulled in automatically. Free account required to install; source is free to read.
Andromeda Input component. Install just this piece. Tokens and any sibling components are pulled in automatically. Free account required to install; source is free to read.
Andromeda Media Card component. Install just this piece. Tokens and any sibling components are pulled in automatically. Free account required to install; source is free to read.
Andromeda Metric Chart component. Install just this piece. Tokens and any sibling components are pulled in automatically. Free account required to install; source is free to read.
Andromeda Music Player component. Install just this piece. Tokens and any sibling components are pulled in automatically. Free account required to install; source is free to read.
Andromeda Nav Item component. Install just this piece. Tokens and any sibling components are pulled in automatically. Free account required to install; source is free to read.
Andromeda Panel Header component. Install just this piece. Tokens and any sibling components are pulled in automatically. Free account required to install; source is free to read.
Andromeda Panel Menu component. Install just this piece. Tokens and any sibling components are pulled in automatically. Free account required to install; source is free to read.
Andromeda Planet component. Install just this piece. Tokens and any sibling components are pulled in automatically. Free account required to install; source is free to read.
Andromeda Progress Bar component. Install just this piece. Tokens and any sibling components are pulled in automatically. Free account required to install; source is free to read.
Andromeda Radar Chart component. Install just this piece. Tokens and any sibling components are pulled in automatically. Free account required to install; source is free to read.
Andromeda Radio component. Install just this piece. Tokens and any sibling components are pulled in automatically. Free account required to install; source is free to read.
Andromeda Search Field component. Install just this piece. Tokens and any sibling components are pulled in automatically. Free account required to install; source is free to read.
Andromeda Segmented Control component. Install just this piece. Tokens and any sibling components are pulled in automatically. Free account required to install; source is free to read.
Andromeda Slider component. Install just this piece. Tokens and any sibling components are pulled in automatically. Free account required to install; source is free to read.
Andromeda Spinner component. Install just this piece. Tokens and any sibling components are pulled in automatically. Free account required to install; source is free to read.
Andromeda Stat Tile component. Install just this piece. Tokens and any sibling components are pulled in automatically. Free account required to install; source is free to read.
Andromeda Table component. Install just this piece. Tokens and any sibling components are pulled in automatically. Free account required to install; source is free to read.
Andromeda Tag component. Install just this piece. Tokens and any sibling components are pulled in automatically. Free account required to install; source is free to read.
Andromeda Textarea component. Install just this piece. Tokens and any sibling components are pulled in automatically. Free account required to install; source is free to read.
Andromeda Toggle component. Install just this piece. Tokens and any sibling components are pulled in automatically. Free account required to install; source is free to read.
Andromeda Tooltip component. Install just this piece. Tokens and any sibling components are pulled in automatically. Free account required to install; source is free to read.
Andromeda Trend Chart component. Install just this piece. Tokens and any sibling components are pulled in automatically. Free account required to install; source is free to read.
Andromeda User Card component. Install just this piece. Tokens and any sibling components are pulled in automatically. Free account required to install; source is free to read.
Andromeda User Menu component. Install just this piece. Tokens and any sibling components are pulled in automatically. Free account required to install; source is free to read.
Andromeda Waveform component. Install just this piece. Tokens and any sibling components are pulled in automatically. Free account required to install; source is free to read.
A dark/light mode toggle styled as a window-blind pull cord — click to yank the cord and watch the icon swap through a venetian-blind slat animation. Free account required to install; source is free to read.
An animated bubble background. A monochrome grid of outline circles bursts near the cursor, expanding and fading, then reforming. Free account required to install; source is free to read.
Circular battery indicator with animated liquid waves that rise as the percentage counts up, looping continuously. Free account required to install; source is free to read.
A crypto token-swap widget with live exchange rates, price impact, and an animated swap button. Free account required to install; source is free to read.
An interactive 3D photo cube with six placeholder images on its faces. Drag with your cursor to spin it freely on both axes; release and it coasts naturally to a stop. No buttons, no snap, no controls, just the cube and your hand. Free account required to install; source is free to read.
A morphing 3D AI orb in Three.js with cyan and magenta rim lights, iridescent pink speckles on a wrinkled surface, and glowing pink robot-eye pills that follow your cursor and blink between idle looks. Free account required to install; source is free to read.
Three crossing caution-tape stripes on orange. Hover to shake, click to intensify. Free account required to install; source is free to read.
A red button that starts a five-second delete countdown, with a one-tap undo. Free account required to install; source is free to read.
A faint canvas grid of diamonds. Seeded sparks send light outward until fronts meet. Free account required to install; source is free to read.
An animated grid background. Thin lines undulate in slow sweeping waves, and hovering repels the grid fabric outward from your cursor. Free account required to install; source is free to read.
An animated dot grid background. Hovering lights up nearby dots with a smooth glow and an organic fade. Free account required to install; source is free to read.
A button that explodes emojis outward in all directions. Five emoji sets cycle on each click. Free account required to install; source is free to read.
A monochrome tab bar of icon circles. Click one and it expands into a labeled pill. Free account required to install; source is free to read.
A desk-calendar widget showing dates 1–31 with a satisfying flip-clock page-turn animation. Free account required to install; source is free to read.
Glassmorphism AI chat input with image upload, web search toggle, and model switcher. Free account required to install; source is free to read.
Glassmorphism content cards with 3D tilt-on-hover, spring physics, and a cursor-following glare highlight. Free account required to install; source is free to read.
Glassmorphism macOS-style dock with cursor-proximity magnification. Icons scale with spring physics as the mouse approaches. Free account required to install; source is free to read.
Centered dialog with deep glass blur, scale-spring entrance, and staggered content reveal. Free account required to install; source is free to read.
Mini music player with glass surface, spinning vinyl art, animated progress bar, and ambient glow. Free account required to install; source is free to read.
Frosted glass navigation bar with animated active tab indicator, ambient color blobs, and spring-physics entrance. Free account required to install; source is free to read.
Swipe-to-dismiss notification stack with glass cards and spring-animated layout transitions. Free account required to install; source is free to read.
Glassmorphism progress bar panel with glowing gradient fills, spring-animated counters, staggered reveal, and replay button. Free account required to install; source is free to read.
Glassmorphism search bar with animated suggestion dropdown, active state glow, and reduced-motion support. Free account required to install; source is free to read.
Collapsible glassmorphism sidebar with icon-only and full label states, spring-animated expand and collapse. Free account required to install; source is free to read.
Range sliders with glass tracks, glowing colored fills, and spring-animated thumbs that scale on drag. Free account required to install; source is free to read.
Glassmorphism numeric stepper with spring number flip, notification-style tinted buttons, and configurable min/max/step. Free account required to install; source is free to read.
Frosted glass pill tab bar with a sliding active indicator. Edge tabs snap flush to the container wall. Free account required to install; source is free to read.
Selectable pill-shaped tags with glass surfaces, unique color accents, and spring-animated check marks. Free account required to install; source is free to read.
Frosted glassmorphism toast notification stack with 4 variants, auto-dismiss progress bar, and spring-animated stacking. Free account required to install; source is free to read.
On/off toggles with glass housing and liquid-feel spring animation. Track color transitions smoothly. Free account required to install; source is free to read.
Frosted glass user avatar trigger with animated dropdown, grouped menu items, and Log Out. Free account required to install; source is free to read.
A terminal-inspired button with a text scramble glitch effect on hover. Free account required to install; source is free to read.
Interactive typography where letters scale 2x and become bold on hover. Free account required to install; source is free to read.
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. Free account required to install; source is free to read.
Rotating 3D ring text animation — the front arc reads upright, the back arc upside-down. Free account required to install; source is free to read.
A scattered stack of photo cards. Drag, click, or arrow keys to focus any card. Free account required to install; source is free to read.
Glass jar widget. Click a reaction to spring the lid and watch the emoji bounce down. Free account required to install; source is free to read.
Colour-blocked label cards scattered at random angles. Tap one to spring it to centre. Free account required to install; source is free to read.
An interactive dot background. A dense grid of dots is magnetically pulled toward your cursor, snapping back with an elastic bounce. Free account required to install; source is free to read.
An interactive swarm of your logo. Marks fly in from off-screen, drift endlessly, and bend toward the cursor. Free account required to install; source is free to read.
An iOS-style pill toggle in warm earth and sand tones — the thumb carries a small icon that morphs from X to checkmark as it slides across. Free account required to install; source is free to read.
A swipeable portrait card stack perfect for introducing a team, showcasing crew members, or picking an avatar. Four stacked cards fan out with soft rotations — drag to browse, tap to choose. Drop in your own photos and names for an About Us section, a character selector, or an onboarding profile picker. Free account required to install; source is free to read.
A feelings check-in card with six expressive faces. Drag the segmented slider and the face, label, and liquid color wash shift with your mood. Free account required to install; source is free to read.
A retro 7-segment LCD clock with pixel-grid overlay. Shows live HH:MM:SS with blinking colon, AM/PM indicator, day of week row, and full date. Free account required to install; source is free to read.
A pill button that morphs into a soft-UI project creation form — title, description, 7-swatch color label picker, Private toggle, and a checkmark-confirm Create button. Free account required to install; source is free to read.
A grain background of randomly scattered dots. Hover to illuminate them with a soft Gaussian glow and organic connection lines. Free account required to install; source is free to read.
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. Free account required to install; source is free to read.
Kinetic text animation arranged in a circle. Hover slows the spin; letters push outward. Free account required to install; source is free to read.
An animated spider web background. Silk strands bow slowly at rest, and hovering pushes each node so it bounces back under tension. Free account required to install; source is free to read.
A 3D particle background built with Three.js. 9,000 particles sit on a slowly spinning sphere in warm gold and cool silver. Free account required to install; source is free to read.
A portrait card whose corner peels on tap, revealing a scannable Wi-Fi QR code. Free account required to install; source is free to read.
A minimal iOS-style slider toggle — thumb glides between off (grey) and on (green) with a snappy spring. Fully responsive. Free account required to install; source is free to read.
Kinetic typography where letters jump, drop, and rotate on cursor proximity. Free account required to install; source is free to read.
Five polaroid photo cards stacked in a casual pile — click to fan them out in a spring-animated arc, hover to lift, click a card to spotlight it. Free account required to install; source is free to read.
A draggable card deck you flick through one card at a time. The top card leans toward your drag, then spins away with momentum to reveal the next, and the deck loops endlessly. Every card pairs a picture with a title and a pill action button with hover and press states. Free account required to install; source is free to read.
Seven health-metric cards bloom into a slowly rotating flower — tap any petal to pull it forward and read your stats up close. Free account required to install; source is free to read.
A radial context menu that fans out formatting tools around a centre button, with active toggle states and an animated label pill. Free account required to install; source is free to read.
Interactive text where each letter responds to cursor proximity, animating variable font properties (weight, stretch, italic, letter-spacing, skew) to create a deformation-under-pressure effect. Free account required to install; source is free to read.
SVG text animation warped by a turbulence filter. Toggle the fan — letters ripple. Free account required to install; source is free to read.
An airplane taxis down a runway progress bar, nose tilting up and taking off at 100%. Free account required to install; source is free to read.
Two words scramble continuously in a pixel cipher. Hover the container to decrypt them one by one — mouse out and they snap back to noise. Free account required to install; source is free to read.
A full-bleed, scroll-driven photo gallery. Each photo wipes in from a different edge. Free account required to install; source is free to read.
A signature pad widget — pill button morphs into a canvas to draw with mouse or touch. Free account required to install; source is free to read.
A typographic magic trick. At rest you read one ambiguous word; hover and it splits into two — LIGHT lifting up, NIGHT sinking down, the shared letters resolving into separate glyphs. Free account required to install; source is free to read.
Swipeable card deck with four editorial slides. Navigate forward and back by drag or tap. Free account required to install; source is free to read.
An animated wireframe globe background. A narrow wave band drifts slowly across the surface, and hovering ripples the lines under your cursor. Free account required to install; source is free to read.
A column of 12 stacked words that reads as a rotating 3D cylinder — 2D transforms skew, scale and shift each row so the rotation travels down the stack. Hover lights one row in warm orange without breaking the rhythm. Free account required to install; source is free to read.
A draggable sticker card wall. Drop notes, toss emoji, pile them up with real 2D physics. Free account required to install; source is free to read.
A playful pill toggle with an expressive face on the thumb — dead (×× eyes, flat mouth) when off, happy (arc eyes, big smile) when on. Track warms from grey to yellow. Free account required to install; source is free to read.
A swipeable project task card stack where each card has a unique accent colour, status badge, and due date. Drag left or right to cycle through tasks — springs back the dismissed card to the bottom of the deck. Free account required to install; source is free to read.
Words animate into view one by one with a satisfying blur-to-sharp entrance, auto-replaying in a loop. Free account required to install; source is free to read.
3D coverflow card carousel of seven tilted photos. Drag or arrows to focus any card. Free account required to install; source is free to read.
A swipeable deck of destination cards. Drag the front card down to fling it off-screen and reveal the next. Each card reveals an animated hotels counter as it comes forward. Free account required to install; source is free to read.
A collapsible file upload widget with a shimmer progress bar — indigo while uploading, amber on pause. Expand to see per-file rows with live progress, time remaining, and pause, resume, refresh, and stop controls. Free account required to install; source is free to read.
A compact live-session presence pill with an animated speaking indicator and overlapping avatars — clicks open a soft-UI modal showing all participants with a Join Now button. Free account required to install; source is free to read.
An animated line background. Dense vertical lines ripple with two layered sine waves, bunching and breathing. Hover to send waves across the canvas. Free account required to install; source is free to read.
Italic SVG word that warps under the cursor — a spring-physics text animation. Free account required to install; source is free to read.
An animated X grid background. Marks illuminate and connect to their neighbors with constellation lines as your cursor passes. Free account required to install; source is free to read.
AI Canvas
Open-source animated React and Tailwind components, design systems, and templates. Browse, copy, and ship. Or let your AI editor install them for you.
Browse the live catalog at aicanvas.me
A growing collection of animated React components, plus a token-driven design system and ready-made templates. Every component arrives as real source code in your project, with an AI remix prompt that works in any AI coding tool. Open core: the free library is MIT, and Premium is proprietary.
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
One-command installs use a free AI Canvas account: signed out, the CLI writes a small placeholder file instead of the component. Sign up free, then copy your personal install command from any component page. No account needed to read the code: every free component's full MIT source lives right here in this repo.
| 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.
AI Canvas is free to start. Premium unlocks design systems, templates, and closed-source components.
Spider Web
Interactive silk web that reacts to your cursor
Cube Carousel
Drag-to-spin 3D photo cube
Curious AI
Morphing 3D AI orb that follows your cursor
Ripple Type
SVG text that ripples on toggle
Product Card Deck
Flick-through draggable card deck
Glass Music Player
Glass mini player with spinning vinyl
Andromeda Button
Sci-fi blueprint button, five variants
Glass Dock
macOS-style dock with cursor magnification
Browse all components at aicanvas.me.
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.
claude mcp add aicanvas -- npx -y @aicanvas/mcp
Or add it to your MCP config:
{
"mcpServers": {
"aicanvas": {
"command": "npx",
"args": ["-y", "@aicanvas/mcp"]
}
}
}
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.
Beyond standalone components, AI Canvas ships Andromeda, a token-driven sci-fi and blueprint design system, with ready-made templates like Mission Control, Service Order, Resource Planning, and Signal Room. Installing an Andromeda component brings its source code plus the shared token bundle it depends on.
See it at aicanvas.me/design-systems/andromeda.
This repo holds the full AI Canvas source: the website and every free component. The component source lives here, not just the site.
| Path | What's there |
|---|---|
components-workspace// | Each free component: index.tsx source, prompts.ts remix prompt, spec.md |
design-systems/andromeda/ | The free Andromeda design system source: tokens, components, utilities |
app/ | The aicanvas.me website (Next.js App Router) |
scripts/generate-registry.mjs | Builds the shadcn registry JSON from the sources above |
The @aicanvas registry files served at /r/*.json are generated at build time from components-workspace/ and design-systems/, so there is no checked-in registry/ folder. Run node scripts/generate-registry.mjs to produce them locally.
React and TypeScript, Tailwind CSS, and Framer Motion. Built for the Next.js App Router and works in any modern React setup. 3D components use Three.js.
AI Canvas is an actively maintained project. New components, design systems, and templates ship regularly. If AI Canvas saves you time, a star helps more builders find it.
AI Canvas is open source under MIT. Issues, ideas, and pull requests are welcome. Open an issue to suggest a component or report a bug.
The free library is MIT licensed. Use it in personal and commercial projects, modify it freely, and ship it without attribution. See LICENSE. Premium components, design systems, and templates are proprietary under the AI Canvas Premium License.
The packages and primitives its components pull in, counted across the registry.
