Creative components, in a new dimension.
Creative components, in a new dimension.
An open source library of tasteful html-in-canvas & WebGL components. Framework agnostic. Copy, paste, ship.
Components
24
And counting
Open source
100%
Free forever
Install
One command
`npx shadcn@latest add https://canvasui.dev/r/particle-reveal-react.json`
The library
Every component, alive on canvas.
How it works
Copy, paste, ship.
1. 01
Pick a component
Browse the library and find the effect that fits. Every demo on this site is the real component, running live. 2. 02Run one command
The shadcn CLI pulls the full source into your project. No package to install, no version to pin. 3. 03Make it yours
The code lives in your repo from day one. Tune the props, restyle it, or rip it apart. It's yours.canvasui.dev/components
Blaze
Liquid
Glass
Shatter
Particle Reveal
VHS
Framework agnostic
One component, four flavors.
Every effect ships as React, Vue, Svelte, and dependency-free vanilla TypeScript. Same engine, same props, native to your stack.
ReactVueSvelteVanilla
hero.tsx
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.
FAQ
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.