Built with real html-in-canvas
Canvas UI — Real HTML. Real Shaders. Infinite Creativity.
24+ interactive components with live WebGL effects. Your DOM is the render target_
$ npx shadcn@latest add @canvas-ui/liquid-react
Works with
React
Solid
Vue
Svelte
vanilla JS
const fx = <Liquid />
move your cursor — the DOM underneath stays live
60fps · webgl
text: selectable · links: clickable
// the catalogue
0 components, every one alive.
The experimental html-in-canvas API lets WebGL read and redraw the live DOM —
text stays selectable, links stay clickable —
and components gracefully fall back to pure WebGL overlays where it isn't supported.
Ship something beautiful.
One registry, five frameworks, zero runtime lock-in — every effect degrades gracefully.
$ npm i @canvas-ui/core