Creative components, in a new dimension.

An open source library of tasteful html-in-canvas & WebGL components. Framework agnostic. Copy, paste, ship.

Every component, alive on canvas.

Copy, paste, ship.

1. Pick a component

   Browse the library and find the effect that fits. Every demo on this site is the real component, running live.

2. Run one command

   The shadcn CLI pulls the full source into your project. No package to install, no version to pin.

3. Make it yours

   The code lives in your repo from day one. Tune the props, restyle it, or rip it apart. It's yours.

One component, six flavors.

Every effect ships as React, Solid, Preact, Vue, Svelte, and dependency-free vanilla TypeScript. Same engine, same props, native to your stack.

import { ParticleReveal } from "@/components/canvasui/ParticleReveal";

export function Hero() {
  return (
    <ParticleReveal radius={300}>
      <YourContent />
    </ParticleReveal>
  );
}

Built for agents.

The registry speaks the shadcn protocol, so any assistant with the shadcn MCP server can browse the library, read the docs, and install components, all from a single prompt.

Good questions.

Is Canvas UI free to use?

Yes. Canvas UI is licensed under MIT + Commons Clause: use every component in any personal or commercial app or website, free forever. The only restriction is reselling or redistributing the components themselves, whether alone, in a bundle, or as a port.

Which browsers are supported?

Components that draw live HTML on canvas rely on an experimental browser capability, available today in Chrome behind a flag. Everywhere else they degrade gracefully: your content renders as regular HTML, and effects like Blaze, Liquid, Laser, Clouds, Bubble, Droplets, Glass, Magnify, Grid, and Ripple keep running as a pure WebGL overlay on top of it. WebGL-based components work in every modern browser.

Will it slow my site down?

The effects render on the GPU via WebGL and animate outside React's render cycle. Each component initializes only when mounted, pauses when off-screen, and cleans up fully on unmount. Reduced-motion preferences are respected.

Do I need React?

No. Every component ships in six flavors: React, Solid, Preact, Vue, Svelte, and dependency-free vanilla TypeScript. Same engine and the same options in all of them.

How do updates work?

The code is copied into your repo, so nothing updates from under you. When a component improves, re-run the install command to pull the latest version, or just keep your copy and evolve it yourself.