An open source library of creative, framework-agnostic components drawn on canvas.
Fluid simulations, shader effects, and 3D scenes that run over your live, fully interactive interface. WebGL or WebGPU via vgpu, your choice.
canvasui.dev · Docs · Components · Playground · Installation · Rendering
Most components use the experimental HTML-in-canvas API to read and redraw your live DOM. Text stays selectable, links stay clickable, and the page becomes a texture that fire, fluid, and glass distort in real time.
Where it is not supported, components fall back to GPU overlays, so every visitor gets a working page.
| 🎨 | 35 components and counting: Liquid, Glass, Shatter, Force Field, Decrypt Reveal, and more |
| 🧩 | Framework agnostic: every component ships for React, Solid, Preact, Vue, Svelte, and vanilla, in both WebGL and WebGPU builds |
| 🖥️ | Two renderers: WebGL with GLSL, or WebGPU through vgpu with WGSL |
| 📋 | Copy, do not install: source lands in your repo via a shadcn-compatible registry |
| ⚡ | Zero config: self-contained, with sensible defaults and typed props |
| 🤖 | MCP ready: let your AI assistant find and install components for you |
Add a component with the shadcn CLI (run npx shadcn@latest init first if you have not):
npx shadcn@latest add @canvas-ui/liquid-reactSwap liquid for any component, react for solid, preact, vue, svelte, or vanilla. Source lands in components/canvasui/, yours to edit.
import { Liquid } from "@/components/canvasui/Liquid";
export default function Page() {
return (
<Liquid>
<YourEntirePage />
</Liquid>
);
}Most components wrap your content. The subtree stays live and interactive; the effect runs on top.
See the installation guide for manual setup.
Every effect ships in two renderer builds. The WebGL build is the default: raw WebGL2 and GLSL, zero dependencies except three for the object effects. The WebGPU build renders through