HomeBookmarks
aicanvasaicanvas
aicanvas

aicanvas

AIby aicanvas
7components85.5Kviews437bookmarks

Installs all 186 components. Without our CLI, run instead.

Auto-indexed

aicanvas contents

  • Expanding TabsExpanding Tabs

    Expanding Tabs

  • Magnetic Logo ClusterMagnetic Logo Cluster

    Magnetic Logo Cluster

  • Search Field

    Search Field

  • Glass Search Bar

    Glass Search Bar

  • Stack TowerStack Tower

    Stack Tower

  • Blind Pull Toggle

    Blind Pull Toggle

  • Runway Loader

    Runway Loader

    • That's all 7 components

    About aicanvas

    aicanvas publishes a shadcn registry at aicanvas.me, with 186 components installable through the shadcn CLI.

    Components
    186
    GitHub stars
    69
    Last commit
    Oct 30, 2026
    Repository
    aicanvas-me/aicanvas

    Also in the aicanvas registry

    Copy a prompt for your agent, copy the install command, or open the docs that ship it.

    • AI Job Cards

      ai-job-cards

      Three AI job card stacks with swipe-to-cycle. Brand logos, bookmark toggle, springs. Free account required to install; source is free to read.

      @phosphor-icons/react, framer-motion1 file
      Docs ↗

    • Andromeda design system

      andromeda

      Every Andromeda component (41 files). Installs the foundation tokens automatically. Requires AI Canvas Premium to install.

      @phosphor-icons/react, @radix-ui/react-slot, class-variance-authority, framer-motion41 files
      Docs ↗

    • Alert (Andromeda)

      andromeda-alert

      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.

      class-variance-authority1 file

    • Andromeda — full system

      andromeda-all

      Every Andromeda component, token, and template, plus the Andromeda brain, in one install. Requires AI Canvas Premium to install.

      andromeda-brain

    • Avatar (Andromeda)

      andromeda-avatar

      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.

      class-variance-authority1 file

    • Badge (Andromeda)

      andromeda-badge

      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.

      class-variance-authority, framer-motion2 files3 examples

    • Button (Andromeda)

      andromeda-button-system

      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.

      @radix-ui/react-slot, class-variance-authority, framer-motion3 files1 example

    • Card (Andromeda)

      andromeda-card

      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.

      class-variance-authority1 file

    • Checkbox (Andromeda)

      andromeda-checkbox

      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.

      @phosphor-icons/react, class-variance-authority2 files

    • Corner Markers (Andromeda)

      andromeda-corner-markers

      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-tokens1 file

    • Data Table (Andromeda)

      andromeda-data-table

      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.

      @phosphor-icons/react, framer-motion3 files

    • Date Range Picker (Andromeda)

      andromeda-date-range-picker

      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.

      @phosphor-icons/react2 files

    • Drawer (Andromeda)

      andromeda-drawer

      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.

      framer-motion1 file

    • Empty State (Andromeda)

      andromeda-empty-state

      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-tokens1 file

    • Gauge (Andromeda)

      andromeda-gauge

      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.

      framer-motion2 files

    • Heat Grid (Andromeda)

      andromeda-heat-grid

      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.

      framer-motion2 files

    • Icon Button (Andromeda)

      andromeda-icon-button

      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.

      class-variance-authority, framer-motion3 files

    • Input (Andromeda)

      andromeda-input

      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.

      class-variance-authority1 file

    • Media Card (Andromeda)

      andromeda-media-card

      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.

      @phosphor-icons/react1 file

    • Metric Chart (Andromeda)

      andromeda-metric-chart

      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.

      framer-motion, recharts2 files

    • Music Player (Andromeda)

      andromeda-music-player

      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.

      @phosphor-icons/react1 file

    • Nav Item (Andromeda)

      andromeda-nav-item

      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.

      @radix-ui/react-slot, class-variance-authority, framer-motion2 files

    • Panel Header (Andromeda)

      andromeda-panel-header

      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-tokens2 files

    • Panel Menu (Andromeda)

      andromeda-panel-menu

      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.

      @phosphor-icons/react1 file

    • Planet (Andromeda)

      andromeda-planet

      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.

      framer-motion, three3 files

    • andromeda-pro

      andromeda-pro-tokens

    • andromeda-pro-accordion

      andromeda-pro-tokens1 example

    • andromeda-pro-alert

      andromeda-pro-tokens

    • andromeda-pro-all

      andromeda-pro-brain

    • andromeda-pro-artifact

      andromeda-pro-tokens1 example

    • andromeda-pro-badge

      andromeda-pro-tokens4 examples

    • andromeda-pro-bento-grid

      andromeda-pro-tokens

    • andromeda-pro-burst

      andromeda-pro-tokens

    • andromeda-pro-button

      andromeda-pro-tokens4 examples

    • andromeda-pro-card

      andromeda-pro-tokens

    • andromeda-pro-checkbox

      andromeda-pro-tokens

    • andromeda-pro-choice-card

      andromeda-pro-tokens

    • andromeda-pro-collapsible

      andromeda-pro-tokens

    • andromeda-pro-combobox

      andromeda-pro-tokens

    • andromeda-pro-corner-markers

      andromeda-pro-tokens

    • andromeda-pro-cube

      andromeda-pro-tokens

    • andromeda-pro-data-table

      andromeda-pro-tokens

    • andromeda-pro-date-range-picker

      andromeda-pro-tokens

    • andromeda-pro-drawer

      andromeda-pro-tokens

    • andromeda-pro-empty-state

      andromeda-pro-tokens

    • andromeda-pro-footer

      andromeda-pro-tokens

    • andromeda-pro-funnel-chart

      andromeda-pro-tokens

    • andromeda-pro-gauge

      andromeda-pro-tokens

    • Progress Bar (Andromeda)

      andromeda-progress-bar

      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.

      framer-motion1 file

    • andromeda-pro-heat-grid

      andromeda-pro-tokens

    • andromeda-pro-icon-button

      andromeda-pro-tokens

    • andromeda-pro-input

      andromeda-pro-tokens

    • andromeda-pro-item

      andromeda-pro-tokens

    • andromeda-pro-logo-cloud

      andromeda-pro-tokens

    • andromeda-pro-marquee

      andromeda-pro-tokens

    • andromeda-pro-message

      andromeda-pro-tokens

    • andromeda-pro-metric-chart

      andromeda-pro-tokens

    • andromeda-pro-music-player

      andromeda-pro-tokens

    • andromeda-pro-navbar

      andromeda-pro-tokens

    • andromeda-pro-nav-item

      andromeda-pro-tokens

    • andromeda-pro-nodes

      andromeda-pro-tokens

    • andromeda-pro-orb

      andromeda-pro-tokens

    • andromeda-pro-panel-header

      andromeda-pro-tokens

    • andromeda-pro-panel-menu

      andromeda-pro-tokens

    • andromeda-pro-payment-card

      andromeda-pro-tokens

    • andromeda-pro-planet

      andromeda-pro-tokens

    • andromeda-pro-popover

      andromeda-pro-tokens

    • andromeda-pro-pricing-card

      andromeda-pro-tokens

    • andromeda-pro-progress-bar

      andromeda-pro-tokens

    • andromeda-pro-prompt-input

      andromeda-pro-tokens

    • andromeda-pro-radar-chart

      andromeda-pro-tokens

    • andromeda-pro-radio

      andromeda-pro-tokens

    • andromeda-pro-section-heading

      andromeda-pro-tokens

    • andromeda-pro-segmented-control

      andromeda-pro-tokens

    • andromeda-pro-sidebar

      andromeda-pro-tokens

    • andromeda-pro-skeleton

      andromeda-pro-tokens

    • andromeda-pro-slider

      andromeda-pro-tokens

    • andromeda-pro-spinner

      andromeda-pro-tokens

    • andromeda-pro-stat-tile

      andromeda-pro-tokens

    • andromeda-pro-stepper

      andromeda-pro-tokens

    • andromeda-pro-strength-meter

      andromeda-pro-tokens

    • andromeda-pro-suggestion

      andromeda-pro-tokens

    • andromeda-pro-table

      andromeda-pro-tokens

    • andromeda-pro-tabs

      andromeda-pro-tokens

    • andromeda-pro-tag

      andromeda-pro-tokens

    • andromeda-pro-textarea

      andromeda-pro-tokens

    • andromeda-pro-toggle

      andromeda-pro-tokens

    • andromeda-pro-tool

      andromeda-pro-tokens

    • andromeda-pro-tooltip

      andromeda-pro-tokens

    • andromeda-pro-top-bar

      andromeda-pro-tokens

    • andromeda-pro-trend-chart

      andromeda-pro-tokens

    • andromeda-pro-waveform

      andromeda-pro-tokens

    • Radar Chart (Andromeda)

      andromeda-radar-chart

      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.

      framer-motion, recharts2 files

    • Radio (Andromeda)

      andromeda-radio

      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.

      class-variance-authority2 files

    • Segmented Control (Andromeda)

      andromeda-segmented-control

      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.

      framer-motion2 files

    • Slider (Andromeda)

      andromeda-slider

      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-tokens2 files

    • Spinner (Andromeda)

      andromeda-spinner

      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-tokens1 file

    • Stat Tile (Andromeda)

      andromeda-stat-tile

      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.

      framer-motion2 files

    • Table (Andromeda)

      andromeda-table

      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.

      @phosphor-icons/react2 files

    • Tag (Andromeda)

      andromeda-tag

      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.

      @phosphor-icons/react, class-variance-authority1 file

    • Textarea (Andromeda)

      andromeda-textarea

      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.

      class-variance-authority1 file

    • Toggle (Andromeda)

      andromeda-toggle

      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.

      class-variance-authority2 files

    • Tooltip (Andromeda)

      andromeda-tooltip

      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.

      framer-motion1 file

    • Trend Chart (Andromeda)

      andromeda-trend-chart

      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.

      @phosphor-icons/react, framer-motion, recharts2 files

    • User Card (Andromeda)

      andromeda-user-card

      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.

      @phosphor-icons/react, framer-motion1 file

    • User Menu (Andromeda)

      andromeda-user-menu

      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.

      @phosphor-icons/react, framer-motion2 files

    • Waveform (Andromeda)

      andromeda-waveform

      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.

      framer-motion2 files

    • Bubble Field

      bubble-field

      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.

      1 file
      Docs ↗

    • Charging Widget

      charging-widget

      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.

      framer-motion1 file
      Docs ↗

    • Crypto Swap

      crypto-swap

      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.

      @phosphor-icons/react, framer-motion, react-dom1 file
      Docs ↗

    • Cube Carousel

      cube-carousel

      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.

      framer-motion1 file
      Docs ↗

    • Curious AI

      curious-ai

      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.

      framer-motion, three1 file
      Docs ↗

    • Danger Stripes

      danger-stripes

      Three crossing caution-tape stripes on orange. Hover to shake, click to intensify. Free account required to install; source is free to read.

      framer-motion1 file
      Docs ↗

    • Delete Button

      delete-button

      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.

      framer-motion, @phosphor-icons/react1 file

    • Diamond Grid

      diamond-grid

      A faint canvas grid of diamonds. Seeded sparks send light outward until fronts meet. Free account required to install; source is free to read.

      1 file

    • Distortion Grid

      distortion-grid

      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.

      1 file
      Docs ↗

    • Dot Grid

      dot-grid

      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.

      1 file
      Docs ↗

    • Emoji Burst

      emoji-burst

      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.

      framer-motion1 file
      Docs ↗

    • Flip Calendar

      flip-calendar

      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.

      framer-motion1 file
      Docs ↗

    • Glass AI Composer

      glass-ai-compose

      Glassmorphism AI chat input with image upload, web search toggle, and model switcher. Free account required to install; source is free to read.

      @phosphor-icons/react, framer-motion1 file
      Docs ↗

    • Glass Card

      glass-card

      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.

      @phosphor-icons/react, framer-motion1 file
      Docs ↗

    • Glass Dock

      glass-dock

      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.

      @phosphor-icons/react, framer-motion1 file
      Docs ↗

    • Glass Modal

      glass-modal

      Centered dialog with deep glass blur, scale-spring entrance, and staggered content reveal. Free account required to install; source is free to read.

      @phosphor-icons/react, framer-motion1 file
      Docs ↗

    • Glass Music Player

      glass-music-player

      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.

      @phosphor-icons/react, framer-motion1 file
      Docs ↗

    • Glass Navbar

      glass-navbar

      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.

      @phosphor-icons/react, framer-motion1 file
      Docs ↗

    • Glass Notifications

      glass-notification

      Swipe-to-dismiss notification stack with glass cards and spring-animated layout transitions. Free account required to install; source is free to read.

      @phosphor-icons/react, framer-motion1 file
      Docs ↗

    • Glass Progress

      glass-progress

      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.

      @phosphor-icons/react, framer-motion1 file
      Docs ↗

    • Glass Sidebar

      glass-sidebar

      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.

      @phosphor-icons/react, framer-motion1 file
      Docs ↗

    • Glass Slider

      glass-slider

      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.

      framer-motion1 file
      Docs ↗

    • Glass Stepper

      glass-stepper

      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.

      @phosphor-icons/react, framer-motion1 file
      Docs ↗

    • Glass Tab Bar

      glass-tab-bar

      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.

      @phosphor-icons/react, framer-motion1 file
      Docs ↗

    • Glass Tags

      glass-tags

      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.

      framer-motion1 file
      Docs ↗

    • Glass Toast

      glass-toast

      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.

      @phosphor-icons/react, framer-motion1 file
      Docs ↗

    • Glass Toggle

      glass-toggle

      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.

      framer-motion1 file
      Docs ↗

    • Glass User Menu

      glass-user-menu

      Frosted glass user avatar trigger with animated dropdown, grouped menu items, and Log Out. Free account required to install; source is free to read.

      @phosphor-icons/react, framer-motion1 file
      Docs ↗

    • Glitch Button

      glitch-button

      A terminal-inspired button with a text scramble glitch effect on hover. Free account required to install; source is free to read.

      framer-motion1 file
      Docs ↗

    • Good Vibes

      good-vibes

      Interactive typography where letters scale 2x and become bold on hover. Free account required to install; source is free to read.

      framer-motion, next1 file
      Docs ↗

    • Grid Lines

      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. Free account required to install; source is free to read.

      1 file
      Docs ↗

    • Halo Type

      halo-type

      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.

      framer-motion1 file
      Docs ↗

    • Interactive Card Stack

      interactive-card-stack

      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.

      framer-motion1 file
      Docs ↗

    • Emoji Reaction Jar

      jar-of-emotions

      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.

      framer-motion, matter-js1 file
      Docs ↗

    • Label Cards

      label-cards

      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.

      framer-motion1 file
      Docs ↗

    • Magnetic Dots

      magnetic-dots

      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.

      1 file
      Docs ↗

    • Mark Toggle

      mark-toggle

      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.

      @phosphor-icons/react, framer-motion1 file
      Docs ↗

    • Meet the Crew

      meet-the-crew

      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.

      @phosphor-icons/react, framer-motion1 file
      Docs ↗

    • Mood Tracker

      mood-tracker

      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.

      framer-motion1 file
      Docs ↗

    • Seven-Segment Clock

      neon-clock

      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.

      1 file
      Docs ↗

    • New Project Modal

      new-project-modal

      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.

      @phosphor-icons/react, framer-motion1 file
      Docs ↗

    • Grain Background

      noise-bg

      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.

      1 file
      Docs ↗

    • Noise Field

      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. Free account required to install; source is free to read.

      1 file
      Docs ↗

    • Orbit

      Kinetic text animation arranged in a circle. Hover slows the spin; letters push outward. Free account required to install; source is free to read.

      next1 file
      Docs ↗

    • Spider Web

      particle-constellation

      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.

      1 file
      Docs ↗

    • Particle Sphere

      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. Free account required to install; source is free to read.

      three1 file
      Docs ↗

    • Peel to Scan

      peel-corner-reveal

      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.

      framer-motion, qrcode.react1 file
      Docs ↗

    • Pill Toggle

      pill-toggle

      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.

      framer-motion1 file
      Docs ↗

    • Playful

      Kinetic typography where letters jump, drop, and rotate on cursor proximity. Free account required to install; source is free to read.

      framer-motion, next1 file
      Docs ↗

    • Polaroid Stack

      polaroid-stack

      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.

      framer-motion1 file
      Docs ↗

    • Product Card Deck

      product-card-deck

      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.

      framer-motion1 file
      Docs ↗

    • Radial Cards

      radial-cards

      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.

      @phosphor-icons/react, framer-motion1 file
      Docs ↗

    • Radial Toolbar

      radial-toolbar

      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.

      @phosphor-icons/react, framer-motion1 file
      Docs ↗

    • Responsive Letters

      responsive-letters

      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.

      framer-motion, next1 file
      Docs ↗

    • Ripple Type

      ripple-type

      SVG text animation warped by a turbulence filter. Toggle the fan — letters ripple. Free account required to install; source is free to read.

      framer-motion1 file
      Docs ↗

    • Scramble Text

      scramble-text

      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.

      framer-motion, geist1 file
      Docs ↗

    • Scroll Wipe Gallery

      scroll-wipe-gallery

      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.

      @phosphor-icons/react, framer-motion1 file

    • Signature Pad

      signature-pad

      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.

      @phosphor-icons/react, framer-motion1 file
      Docs ↗

    • Slice Type

      slice-type

      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.

      framer-motion1 file
      Docs ↗

    • Slide Deck

      slide-deck

      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.

      framer-motion1 file
      Docs ↗

    • Wireframe Globe

      sphere-lines

      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.

      1 file
      Docs ↗

    • Sticker Wall

      sticker-wall

      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.

      framer-motion, matter-js1 file
      Docs ↗

    • Taga Toggle

      taga-toggle

      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.

      framer-motion1 file
      Docs ↗

    • Task Cards

      task-cards

      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.

      @phosphor-icons/react, framer-motion1 file
      Docs ↗

    • Text Blur Reveal

      text-blur-reveal

      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.

      framer-motion1 file
      Docs ↗

    • Tilted Coverflow

      tilted-coverflow

      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.

      framer-motion1 file
      Docs ↗

    • Travel Deck

      traveldeck

      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.

      @phosphor-icons/react, framer-motion1 file
      Docs ↗

    • Upload Progress

      upload-progress

      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.

      @phosphor-icons/react, framer-motion1 file
      Docs ↗

    • Live Session Pill

      voice-chat-pill

      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.

      @phosphor-icons/react, framer-motion1 file
      Docs ↗

    • Wave Lines

      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. Free account required to install; source is free to read.

      1 file
      Docs ↗

    • X Grid

      x-grid

      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.

      1 file
      Docs ↗

    From the aicanvas readme

    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/ 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

    PathCommand or actionBest for
    shadcn CLInpx shadcn@latest add @aicanvas/Dropping finished, open-source code straight into your repo
    AI Canvas MCPnpx -y @aicanvas/mcpLetting your AI editor search and install components for you
    Remix with AICopy the full prompt from any free component pageRebuilding 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.

    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.

    Repository layout

    This repo holds the AI Canvas source: the website and the free component library. The component source lives here, not just the site.

    PathWhat's there
    components-workspace//Each free component: index.tsx source and its prompts.ts remix prompt, plus a spec.md on many
    design-systems/andromeda/The free Andromeda design system source: tokens, components, utilities
    app/The aicanvas.me website (Next.js App Router)
    scripts/generate-registry.mjsBuilds 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.

    Tech stack

    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.

    Common Questions

    Do I need an account? Not to read the code. Every component page shows its full source, free to read and copy. Most of the free library also lives right here in this repo. A free account is only needed for the one-command npx shadcn add install, which writes a placeholder file when you are signed out.

    Does it work outside Next.js? Yes. Components are plain React and TypeScript with Tailwind and Framer Motion. The App Router is the default target, not a requirement. A few components load their display font through next/font/google; outside Next.js, swap that import for your own font loader.

    Do I get a dependency or real code? Real code. Installing copies the source into your project, so you own it and can change anything. There is no AI Canvas package to keep in sync.

    Can I use it commercially? Yes, the free library is MIT. Use it in commercial projects, modify it, and ship it without attribution. Premium is licensed separately, see License.

    What is the remix prompt? Every component ships with one comprehensive, platform-agnostic prompt. Paste it into any AI coding tool to rebuild that component your way instead of copying it as is.

    How do I keep components up to date? You do not have to. Once installed, the code is yours and never changes under you. Re-run the install command if you want the latest version of a component.

    Contributing

    AI Canvas is actively maintained and new components ship regularly. Issues, ideas, and pull requests are welcome: open an issue to suggest a component or report a bug.

    If AI Canvas saves you time, a star helps more builders find it.

    License

    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.

    Read the rest on GitHub →

    What aicanvas builds on

    The packages and primitives its components pull in, counted across the registry.

    andromeda-pro-tokens79andromeda-tokens44andromeda-brain1andromeda-pro-brain1

    What aicanvas shipped recently

    Every appearance and removal our crawl has seen in the registry index.

    • andromeda-pro-accordionaddedOct 7, 2026
    • andromeda-pro-bento-gridaddedOct 7, 2026
    • andromeda-buttonremovedOct 6, 2026
    • andromeda-pro-ai-chataddedOct 2, 2026
    • andromeda-pro-artifactaddedOct 2, 2026
    • andromeda-pro-collapsibleaddedOct 2, 2026
    • andromeda-pro-comboboxaddedOct 2, 2026
    • andromeda-pro-cubeaddedOct 2, 2026
    • andromeda-pro-city-operationsaddedSep 19, 2026
    • andromeda-proaddedSep 16, 2026
    • andromeda-pro-alert

    Registries like aicanvas

    Magic UI

    Magic UI

    by Dillion Verma

    64

    components

    coss

    coss

    by coss

    74

    components

    cult ui

    cult ui

    by cult/ui

    50

    components

    Motion Primitives

    Motion Primitives

    by Julien Thibeaut

    39

    components

    Browse every shadcn registry we track →

    added
    Sep 16, 2026
  • andromeda-pro-alladdedSep 16, 2026
  • andromeda-pro-avataraddedSep 16, 2026
  • andromeda-pro-badgeaddedSep 16, 2026
  • andromeda-pro-burstaddedSep 16, 2026
  • andromeda-pro-buttonaddedSep 16, 2026
  • andromeda-pro-cardaddedSep 16, 2026
  • andromeda-pro-checkboxaddedSep 16, 2026
  • andromeda-pro-choice-cardaddedSep 16, 2026
  • andromeda-pro-corner-markersaddedSep 16, 2026
    • ReUI

    ReUI

    by Sean Hello

    263

    components

    Kokonut UI

    Kokonut UI

    by Kokonut UI

    60

    components

    1. Components
    2. /
    3. aicanvas
    4. /
    5. aicanvas

    Related libraries

    Cnippet

    Cnippet

    by Cnippet

    347

    components

    Ruixen UI

    Ruixen UI

    by Ruixen UI

    347

    components

    chetanverma/ui

    chetanverma/ui

    by Chetan Verma

    18

    components

    Aceternity UI

    Aceternity UI

    by Manu Arora

    89

    components

    HextaUI

    HextaUI

    by Preet Suthar

    119

    components

    Fancy Components

    Fancy Components

    by Daniel Petho

    35

    components

    About aicanvas

    aicanvas is a component library on 21st.dev by aicanvas with 7 public React components. Every component ships with a live interactive preview and full TSX source — copy the code, install it through the shadcn CLI, or pull it into Cursor or Claude Code over MCP.

    All 7 aicanvas components

    • Blind Pull Toggle
    • Expanding Tabs
    • Glass Search Bar
    • Magnetic Logo Cluster
    • Runway Loader
    • Search Field
    • Stack Tower

    Browse all component libraries →