# Canvas UI

> Open-source html-in-canvas UI component library powered by WebGL and WebGPU

Canvas UI is a component library that renders live, interactive HTML elements inside an HTML canvas using real-time WebGL and WebGPU shaders. It allows developers to apply advanced visual effects—like fluid simulations, particle dispersals, and glass refractions—directly over standard DOM elements. Components install directly into codebases using the shadcn CLI pattern across major frameworks.

Website: https://canvasui.dev/

## What it is for

- Apply real-time GPU shader effects like ripples, glitches, and glass refraction over live HTML
- Add interactive particle, fluid, or dither animations to landing page hero sections
- Render 3D models or SVGs as ASCII, liquid, or glass objects inside standard web layouts
- Install customizable creative UI components into projects using shadcn registry CLI

## Features

- HTML-in-canvas rendering running real-time shaders over live interactive DOM
- Dual WebGL and WebGPU support powered by vgpu and WGSL shaders
- Framework-agnostic builds for React, Vue, Svelte, Solid, Preact, and vanilla JavaScript
- Distribution model via shadcn CLI to drop source code directly into your repository
- Over 35 creative effect components including Liquid, Shatter, Glitch, and Asciify

## Pricing

Free and open source

## Details

- Type: Web app
- Category: [Development](https://xiry.app/topics/development.md)
- Topic: [UI Components](https://xiry.app/topics/development/ui-components.md)
- Open source: yes
- Platforms: Web, Code library
- For: Frontend developers and creative web designers building high-impact landing pages and web apps.
- Alternative to: Aceternity UI, Magic UI
- Tags: canvas, webgl, webgpu, shaders, ui library, react, shadcn

## Why it was saved

- [@shadcn, 23 July 2026](https://x.com/shadcn/status/2080259921816220118): First html-in-canvas component library, endorsed by shadcn as one of the most impressive registries he's seen.

## Compare

- [Alternatives to Aceternity UI](https://xiry.app/alternatives/aceternity-ui.md)
- [Alternatives to Magic UI](https://xiry.app/alternatives/magic-ui.md)

## Related

- [shadcn/ui](https://xiry.app/resources/shadcn-ui-1902): Copy-paste React UI components built with Tailwind CSS and Radix primitives. (Website, Open source)
- [Efferd](https://xiry.app/resources/efferd): Pre-built, responsive shadcn/ui blocks and layouts for React applications (Web app, Freemium)
- [Motion](https://xiry.app/resources/motion): Open-source animation library for React, Vue, and vanilla JavaScript (Website, Freemium)
- [React Bits](https://xiry.app/resources/react-bits): Open-source animated and interactive React UI components and backgrounds (Website, Freemium)
- [21st.dev](https://xiry.app/resources/21st-dev): Curated directory of crafted React, Tailwind, and shadcn UI components. (Website, Freemium)
- [lucide-animated](https://xiry.app/resources/lucide-animated): Open-source animated React icons built with Lucide and Motion (Web app, Open source)

Updated 10 October 2026. Page: https://xiry.app/resources/canvas-ui

Make your own library: Xiry takes your saved reels, tweets, Reddit bookmarks and Watch Later videos, makes them searchable and pulls the useful stuff out, like this library. It's invite-only for now; join the waitlist at https://xiry.app/#waitlist.