Creative components, in a new dimension.
An open source library of tasteful html-in-canvas & WebGL components. Framework agnostic. Copy, paste, ship.
Components
33
And counting
Open source
100%
Free forever
The library
Every component, alive on canvas.
How it works
Copy, paste, ship.
Framework agnostic
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>
);
}AI-ready
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.
Set up the MCP serverFAQ
Good questions.
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.
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.
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.
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.
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.
