xiry.

Development · Web app

Canvas UI

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

From the Xiry library · Updated 10 October 2026

Visit canvasui.dev ↗

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.

What it's 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
Topic
UI Components
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: First html-in-canvas component library, endorsed by shadcn as one of the most impressive registries he's seen.

Compare

Related

  • shadcn/ui

    Copy-paste React UI components built with Tailwind CSS and Radix primitives.

  • Efferd

    Pre-built, responsive shadcn/ui blocks and layouts for React applications

  • Motion

    Open-source animation library for React, Vue, and vanilla JavaScript

  • React Bits

    Open-source animated and interactive React UI components and backgrounds

  • 21st.dev

    Curated directory of crafted React, Tailwind, and shadcn UI components.

  • lucide-animated

    Open-source animated React icons built with Lucide and Motion

All 114 in UI Components →

Updated