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.
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 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.
