Creative components, in a new dimension.
An open source library of tasteful html-in-canvas components, in WebGL or WebGPU. Framework agnostic.
Components
35
And counting
Open source
100%
Free forever
The library
Every component, alive on canvas.
Community
Featured on YouTube
See Canvas UI in action in these awesome videos.
Words from X
What developers are saying about Canvas UI.
Chrome for Developers
@ChromiumDev
Great to see HTML-in-Canvas already empowering new frameworks to bring the power of this API to more developers.
shadcn
@shadcn
One of the most impressive registries I've seen. I don't even know how half of this works. Congrats on the launch.
Evan Robertson
@evanbrobertson
I haven't been this impressed with effects in the browser in a long time.
Maarten
@mrvdlei
Without a doubt the biggest UI release of the year.
Wasil
@arwasil
Make the web fun again.
Farhad Nawab
@FarhadNawab
Landing pages are about to get a lot harder to ignore.
Aleksandr Pasevin
@A_Pasevin
The tech of my dreams is finally here.
Shounak Ghosh
@shahankk42
My mind is officially blown.
Dennis Morello
@morellodev
Name a cooler UI library. I'll wait.
Francisco Macedo
@franbmacedo
The state of the art for products in the age of AI: building blocks that work well and are easy for an LLM to use.
Marcel
@miltovi777
My mind is blown. The future of the web is so cool.
Dennis
@Denn1s_B
Are we witnessing history in the making right now?
jhcoder
@J_HardCoder
An HTML-in-Canvas component library... groundbreaking, crazy, and amazing.
Andrew V
@AI_Andrew
The internet should not be allowed to be this fun.
Karim
@karimthemghribi
This is legendary.
Guan Mu
@ZeroZ_JQ
Imagination maxed out.
Pierre
@pgllmt
The first true HTML-in-Canvas component library. The kind of thing that moves the web forward.
Skinner
@CreativeSkyAI
This is art.
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>
);
}Agent
MCP connectedAdd a particle reveal effect to my hero section
Found particle-reveal in the Canvas UI registry. Installing it now.
npx shadcn@latest add @canvas-ui/particle-reveal-react
Done. ParticleReveal.tsx is now wired into your hero.
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 GPU overlay on top of it. The WebGL builds work in every modern browser; the WebGPU builds need a browser with WebGPU (Chrome, Edge, Safari 26, Firefox 141) and show your content unchanged elsewhere.
The effects render on the GPU, through WebGL or WebGPU via vgpu, 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. Both the WebGL and the WebGPU build ship in all six.
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.
