Canvas UI: Creative Canvas and WebGL Component Library
Creative components, in a new dimension.<br>An open source library of tasteful html-in-canvas & WebGL components. Framework agnostic. Copy, paste, ship.<br>Get startedBrowse components
Components<br>24<br>And counting
Open source<br>100%<br>Free forever
Install<br>One command
npx shadcn@latest add https://canvasui.dev/r/particle-reveal-react.json
The library<br>Every component, alive on canvas.
Browse all
How it works<br>Copy, paste, ship.
01<br>Pick a component<br>Browse the library and find the effect that fits. Every demo on this site is the real component, running live.
02<br>Run one command<br>The shadcn CLI pulls the full source into your project. No package to install, no version to pin.
03<br>Make it yours<br>The code lives in your repo from day one. Tune the props, restyle it, or rip it apart. It's yours.
canvasui.dev/components<br>Blaze<br>Liquid<br>Glass<br>Shatter<br>Particle Reveal<br>VHS
Framework agnostic<br>One component, four flavors.<br>Every effect ships as React, Vue, Svelte, and dependency-free vanilla TypeScript. Same engine, same props, native to your stack.
ReactVueSvelteVanilla<br>hero.tsx
import { ParticleReveal } from "@/components/canvasui/ParticleReveal";
export function Hero() {<br>return (<br>ParticleReveal radius={300}><br>YourContent /><br>ParticleReveal><br>);
img:first-child]:pt-0 data-[size=sm]:[--card-spacing:--spacing(3)] data-[size=sm]:has-data-[slot=card-footer]:pb-0 *:[img:first-child]:rounded-t-xl *:[img:last-child]:rounded-b-xl gap-0 overflow-hidden p-0">Agent<br>svg]:pointer-events-none [&>svg]:size-3! border-border text-foreground [a]:hover:bg-muted [a]:hover:text-muted-foreground gap-1.5 font-normal">MCP connected<br>Add a particle reveal effect to my hero section
Found particle-reveal in the Canvas UI registry. Installing it now.
shadcn CLI<br>npx shadcn@latest add @canvasui/particle-reveal-react
Done. ParticleReveal.tsx is in components/canvasui, wired into your hero.
AI-ready<br>Built for agents.<br>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.<br>Set up the MCP server
FAQ<br>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 four flavors: React, 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.