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.

canvasui.dev · Docs · Components

What makes it different

Most of the library is built on the experimental html-in-canvas API, which lets WebGL effects read and redraw your live DOM. Text stays selectable, links stay clickable, and the whole page becomes a texture that fire, fluid, and glass can distort in real time.

Where html-in-canvas is not supported, components degrade gracefully to pure WebGL overlays, so every visitor gets a working page.

• 24 components and counting: Liquid, Blaze, Glass, Shatter, VHS, Particle Reveal, and more
• Framework agnostic: React, Vue, Svelte, and vanilla JS builds for every component
• Copy, do not install: components ship as source through a shadcn-compatible registry
• Zero config: each component is self-contained with sensible defaults and typed props
• MCP ready: point the shadcn MCP server at the registry and let your AI assistant install components

Quick start

Add a component with the shadcn CLI (run npx shadcn@latest init first if you have not used it before):

npx shadcn@latest add @canvas-ui/liquid-react

Swap liquid for any component and react for vue, svelte, or vanilla. The source lands in components/canvasui/ in your project, yours to edit.

See the installation guide for manual setup and framework notes.

Browser support

The full html-in-canvas experience currently requires Chrome or Edge 140+ with the #enable-experimental-web-platform-features flag. Everywhere else, components automatically fall back to WebGL overlay rendering. Details in the docs.

Development

This repo contains the library source (src/lib), the documentation site (Next.js 16, Tailwind v4, deployed to Cloudflare Workers), and the registry build.

npm install
npm run dev        # builds the registry, then starts next dev
npm run build      # production build
npm run deploy     # build and deploy to Cloudflare

Contributing

Issues and pull requests are welcome. See CONTRIBUTING.md to get started.

License

MIT + Commons Clause. Free to use in your own projects, commercial or not. The Commons Clause only restricts selling the library itself.