---
name: "@canvas-ui"
slug: "canvas-ui"
description: "Creative html-in-canvas components. React, Vue, Svelte, TS."
category: "Uncategorized"
tags: ["glassmorphism", "retro"]
framework: "vue"
license: null
author: "DavidHDev"
website: "https://canvasui.dev/"
github: "https://github.com/DavidHDev/canvas-ui"
registry: "https://canvasui.dev/r/registry.json"
pro: false
pro_url: null
github_stars: 2318
component_count: 150
generated_at: "2026-07-28T08:59:05.895Z"
---

# @canvas-ui

Creative html-in-canvas components. React, Vue, Svelte, TS.

## Links

- Website: https://canvasui.dev/
- GitHub: https://github.com/DavidHDev/canvas-ui
- Registry JSON: https://canvasui.dev/r/registry.json
- Directory page: https://sh4dcn.vercel.app/registry/canvas-ui
- This file: https://sh4dcn.vercel.app/md/canvas-ui.md

## Install

```sh
# add the whole registry (shadcn CLI)
npx shadcn@latest add https://canvasui.dev/r/registry.json
pnpm dlx shadcn@latest add https://canvasui.dev/r/registry.json
bunx shadcn@latest add https://canvasui.dev/r/registry.json
# clone the source repo
git clone https://github.com/DavidHDev/canvas-ui.git
# fetch the raw registry index
curl -s https://canvasui.dev/r/registry.json
```

## Components (150)

| name | type | description | install |
| --- | --- | --- | --- |
| asciify-react | registry:component | Redraws your page as live ascii characters in a soft radius around the cursor, with real glyph, shade block, and binary ramps. The HTML stays interactive in Ch… | `npx shadcn@latest add https://canvasui.dev/r/asciify-react.json` |
| asciify-vue | registry:component | Redraws your page as live ascii characters in a soft radius around the cursor, with real glyph, shade block, and binary ramps. The HTML stays interactive in Ch… | `npx shadcn@latest add https://canvasui.dev/r/asciify-vue.json` |
| asciify-svelte | registry:component | Redraws your page as live ascii characters in a soft radius around the cursor, with real glyph, shade block, and binary ramps. The HTML stays interactive in Ch… | `npx shadcn@latest add https://canvasui.dev/r/asciify-svelte.json` |
| asciify-solid | registry:component | Redraws your page as live ascii characters in a soft radius around the cursor, with real glyph, shade block, and binary ramps. The HTML stays interactive in Ch… | `npx shadcn@latest add https://canvasui.dev/r/asciify-solid.json` |
| asciify-preact | registry:component | Redraws your page as live ascii characters in a soft radius around the cursor, with real glyph, shade block, and binary ramps. The HTML stays interactive in Ch… | `npx shadcn@latest add https://canvasui.dev/r/asciify-preact.json` |
| asciify-vanilla | registry:component | Redraws your page as live ascii characters in a soft radius around the cursor, with real glyph, shade block, and binary ramps. The HTML stays interactive in Ch… | `npx shadcn@latest add https://canvasui.dev/r/asciify-vanilla.json` |
| bend-react | registry:component | Folds the top and bottom of your page over virtual edges as you scroll, like scrolling on the face of a cube. The HTML stays interactive. No dependencies. | `npx shadcn@latest add https://canvasui.dev/r/bend-react.json` |
| bend-vue | registry:component | Folds the top and bottom of your page over virtual edges as you scroll, like scrolling on the face of a cube. The HTML stays interactive. No dependencies. | `npx shadcn@latest add https://canvasui.dev/r/bend-vue.json` |
| bend-svelte | registry:component | Folds the top and bottom of your page over virtual edges as you scroll, like scrolling on the face of a cube. The HTML stays interactive. No dependencies. | `npx shadcn@latest add https://canvasui.dev/r/bend-svelte.json` |
| bend-solid | registry:component | Folds the top and bottom of your page over virtual edges as you scroll, like scrolling on the face of a cube. The HTML stays interactive. No dependencies. | `npx shadcn@latest add https://canvasui.dev/r/bend-solid.json` |
| bend-preact | registry:component | Folds the top and bottom of your page over virtual edges as you scroll, like scrolling on the face of a cube. The HTML stays interactive. No dependencies. | `npx shadcn@latest add https://canvasui.dev/r/bend-preact.json` |
| bend-vanilla | registry:component | Folds the top and bottom of your page over virtual edges as you scroll, like scrolling on the face of a cube. The HTML stays interactive. No dependencies. | `npx shadcn@latest add https://canvasui.dev/r/bend-vanilla.json` |
| grid-react | registry:component | Splits your page into a grid of 3D tiles that ripple in waves around the cursor. The HTML stays interactive. No dependencies. | `npx shadcn@latest add https://canvasui.dev/r/grid-react.json` |
| grid-vue | registry:component | Splits your page into a grid of 3D tiles that ripple in waves around the cursor. The HTML stays interactive. No dependencies. | `npx shadcn@latest add https://canvasui.dev/r/grid-vue.json` |
| grid-svelte | registry:component | Splits your page into a grid of 3D tiles that ripple in waves around the cursor. The HTML stays interactive. No dependencies. | `npx shadcn@latest add https://canvasui.dev/r/grid-svelte.json` |
| grid-solid | registry:component | Splits your page into a grid of 3D tiles that ripple in waves around the cursor. The HTML stays interactive. No dependencies. | `npx shadcn@latest add https://canvasui.dev/r/grid-solid.json` |
| grid-preact | registry:component | Splits your page into a grid of 3D tiles that ripple in waves around the cursor. The HTML stays interactive. No dependencies. | `npx shadcn@latest add https://canvasui.dev/r/grid-preact.json` |
| grid-vanilla | registry:component | Splits your page into a grid of 3D tiles that ripple in waves around the cursor. The HTML stays interactive. No dependencies. | `npx shadcn@latest add https://canvasui.dev/r/grid-vanilla.json` |
| blaze-react | registry:component | Fire sparks, smoke, and heat distortion rising from the bottom of your page. The HTML stays interactive. No dependencies. | `npx shadcn@latest add https://canvasui.dev/r/blaze-react.json` |
| blaze-vue | registry:component | Fire sparks, smoke, and heat distortion rising from the bottom of your page. The HTML stays interactive. No dependencies. | `npx shadcn@latest add https://canvasui.dev/r/blaze-vue.json` |
| blaze-svelte | registry:component | Fire sparks, smoke, and heat distortion rising from the bottom of your page. The HTML stays interactive. No dependencies. | `npx shadcn@latest add https://canvasui.dev/r/blaze-svelte.json` |
| blaze-solid | registry:component | Fire sparks, smoke, and heat distortion rising from the bottom of your page. The HTML stays interactive. No dependencies. | `npx shadcn@latest add https://canvasui.dev/r/blaze-solid.json` |
| blaze-preact | registry:component | Fire sparks, smoke, and heat distortion rising from the bottom of your page. The HTML stays interactive. No dependencies. | `npx shadcn@latest add https://canvasui.dev/r/blaze-preact.json` |
| blaze-vanilla | registry:component | Fire sparks, smoke, and heat distortion rising from the bottom of your page. The HTML stays interactive. No dependencies. | `npx shadcn@latest add https://canvasui.dev/r/blaze-vanilla.json` |
| bubble-react | registry:component | A glassy droplet that trails the cursor as blending metaballs and refracts the live page beneath it, with dispersion, frost, and an iridescent sheen. The HTML … | `npx shadcn@latest add https://canvasui.dev/r/bubble-react.json` |
| bubble-vue | registry:component | A glassy droplet that trails the cursor as blending metaballs and refracts the live page beneath it, with dispersion, frost, and an iridescent sheen. The HTML … | `npx shadcn@latest add https://canvasui.dev/r/bubble-vue.json` |
| bubble-svelte | registry:component | A glassy droplet that trails the cursor as blending metaballs and refracts the live page beneath it, with dispersion, frost, and an iridescent sheen. The HTML … | `npx shadcn@latest add https://canvasui.dev/r/bubble-svelte.json` |
| bubble-solid | registry:component | A glassy droplet that trails the cursor as blending metaballs and refracts the live page beneath it, with dispersion, frost, and an iridescent sheen. The HTML … | `npx shadcn@latest add https://canvasui.dev/r/bubble-solid.json` |
| bubble-preact | registry:component | A glassy droplet that trails the cursor as blending metaballs and refracts the live page beneath it, with dispersion, frost, and an iridescent sheen. The HTML … | `npx shadcn@latest add https://canvasui.dev/r/bubble-preact.json` |
| bubble-vanilla | registry:component | A glassy droplet that trails the cursor as blending metaballs and refracts the live page beneath it, with dispersion, frost, and an iridescent sheen. The HTML … | `npx shadcn@latest add https://canvasui.dev/r/bubble-vanilla.json` |
| cloth-react | registry:component | Hangs your live HTML on a piece of fabric rippling in the wind, with softly lit folds. Cursor strokes send waves across the cloth. The HTML stays interactive. … | `npx shadcn@latest add https://canvasui.dev/r/cloth-react.json` |
| cloth-vue | registry:component | Hangs your live HTML on a piece of fabric rippling in the wind, with softly lit folds. Cursor strokes send waves across the cloth. The HTML stays interactive. … | `npx shadcn@latest add https://canvasui.dev/r/cloth-vue.json` |
| cloth-svelte | registry:component | Hangs your live HTML on a piece of fabric rippling in the wind, with softly lit folds. Cursor strokes send waves across the cloth. The HTML stays interactive. … | `npx shadcn@latest add https://canvasui.dev/r/cloth-svelte.json` |
| cloth-solid | registry:component | Hangs your live HTML on a piece of fabric rippling in the wind, with softly lit folds. Cursor strokes send waves across the cloth. The HTML stays interactive. … | `npx shadcn@latest add https://canvasui.dev/r/cloth-solid.json` |
| cloth-preact | registry:component | Hangs your live HTML on a piece of fabric rippling in the wind, with softly lit folds. Cursor strokes send waves across the cloth. The HTML stays interactive. … | `npx shadcn@latest add https://canvasui.dev/r/cloth-preact.json` |
| cloth-vanilla | registry:component | Hangs your live HTML on a piece of fabric rippling in the wind, with softly lit folds. Cursor strokes send waves across the cloth. The HTML stays interactive. … | `npx shadcn@latest add https://canvasui.dev/r/cloth-vanilla.json` |
| clouds-react | registry:component | Procedural fog that drifts over your page and blurs what it covers. Cursor movement parts the clouds. The HTML stays interactive. No dependencies. | `npx shadcn@latest add https://canvasui.dev/r/clouds-react.json` |
| clouds-vue | registry:component | Procedural fog that drifts over your page and blurs what it covers. Cursor movement parts the clouds. The HTML stays interactive. No dependencies. | `npx shadcn@latest add https://canvasui.dev/r/clouds-vue.json` |
| clouds-svelte | registry:component | Procedural fog that drifts over your page and blurs what it covers. Cursor movement parts the clouds. The HTML stays interactive. No dependencies. | `npx shadcn@latest add https://canvasui.dev/r/clouds-svelte.json` |
| clouds-solid | registry:component | Procedural fog that drifts over your page and blurs what it covers. Cursor movement parts the clouds. The HTML stays interactive. No dependencies. | `npx shadcn@latest add https://canvasui.dev/r/clouds-solid.json` |
| clouds-preact | registry:component | Procedural fog that drifts over your page and blurs what it covers. Cursor movement parts the clouds. The HTML stays interactive. No dependencies. | `npx shadcn@latest add https://canvasui.dev/r/clouds-preact.json` |
| clouds-vanilla | registry:component | Procedural fog that drifts over your page and blurs what it covers. Cursor movement parts the clouds. The HTML stays interactive. No dependencies. | `npx shadcn@latest add https://canvasui.dev/r/clouds-vanilla.json` |
| liquid-react | registry:component | A pointer-driven WebGL fluid simulation over your page. The HTML stays interactive. No dependencies. | `npx shadcn@latest add https://canvasui.dev/r/liquid-react.json` |
| liquid-vue | registry:component | A pointer-driven WebGL fluid simulation over your page. The HTML stays interactive. No dependencies. | `npx shadcn@latest add https://canvasui.dev/r/liquid-vue.json` |
| liquid-svelte | registry:component | A pointer-driven WebGL fluid simulation over your page. The HTML stays interactive. No dependencies. | `npx shadcn@latest add https://canvasui.dev/r/liquid-svelte.json` |
| liquid-solid | registry:component | A pointer-driven WebGL fluid simulation over your page. The HTML stays interactive. No dependencies. | `npx shadcn@latest add https://canvasui.dev/r/liquid-solid.json` |
| liquid-preact | registry:component | A pointer-driven WebGL fluid simulation over your page. The HTML stays interactive. No dependencies. | `npx shadcn@latest add https://canvasui.dev/r/liquid-preact.json` |
| liquid-vanilla | registry:component | A pointer-driven WebGL fluid simulation over your page. The HTML stays interactive. No dependencies. | `npx shadcn@latest add https://canvasui.dev/r/liquid-vanilla.json` |
| magnify-react | registry:component | A sci-fi scanner lens that follows the cursor and magnifies the live page inside a configurable HUD reticle, with chromatic aberration haze and click ripples t… | `npx shadcn@latest add https://canvasui.dev/r/magnify-react.json` |
| magnify-vue | registry:component | A sci-fi scanner lens that follows the cursor and magnifies the live page inside a configurable HUD reticle, with chromatic aberration haze and click ripples t… | `npx shadcn@latest add https://canvasui.dev/r/magnify-vue.json` |
| magnify-svelte | registry:component | A sci-fi scanner lens that follows the cursor and magnifies the live page inside a configurable HUD reticle, with chromatic aberration haze and click ripples t… | `npx shadcn@latest add https://canvasui.dev/r/magnify-svelte.json` |
| magnify-solid | registry:component | A sci-fi scanner lens that follows the cursor and magnifies the live page inside a configurable HUD reticle, with chromatic aberration haze and click ripples t… | `npx shadcn@latest add https://canvasui.dev/r/magnify-solid.json` |
| magnify-preact | registry:component | A sci-fi scanner lens that follows the cursor and magnifies the live page inside a configurable HUD reticle, with chromatic aberration haze and click ripples t… | `npx shadcn@latest add https://canvasui.dev/r/magnify-preact.json` |
| magnify-vanilla | registry:component | A sci-fi scanner lens that follows the cursor and magnifies the live page inside a configurable HUD reticle, with chromatic aberration haze and click ripples t… | `npx shadcn@latest add https://canvasui.dev/r/magnify-vanilla.json` |
| dithered-object-react | registry:component | Renders any GLB/glTF model, SVG, or image in a floating studio scene through a 1-bit Bayer, halftone, or Floyd–Steinberg dither. Built on three.js. | `npx shadcn@latest add https://canvasui.dev/r/dithered-object-react.json` |
| dithered-object-vue | registry:component | Renders any GLB/glTF model, SVG, or image in a floating studio scene through a 1-bit Bayer, halftone, or Floyd–Steinberg dither. Built on three.js. | `npx shadcn@latest add https://canvasui.dev/r/dithered-object-vue.json` |
| dithered-object-svelte | registry:component | Renders any GLB/glTF model, SVG, or image in a floating studio scene through a 1-bit Bayer, halftone, or Floyd–Steinberg dither. Built on three.js. | `npx shadcn@latest add https://canvasui.dev/r/dithered-object-svelte.json` |
| dithered-object-solid | registry:component | Renders any GLB/glTF model, SVG, or image in a floating studio scene through a 1-bit Bayer, halftone, or Floyd–Steinberg dither. Built on three.js. | `npx shadcn@latest add https://canvasui.dev/r/dithered-object-solid.json` |
| dithered-object-preact | registry:component | Renders any GLB/glTF model, SVG, or image in a floating studio scene through a 1-bit Bayer, halftone, or Floyd–Steinberg dither. Built on three.js. | `npx shadcn@latest add https://canvasui.dev/r/dithered-object-preact.json` |
| dithered-object-vanilla | registry:component | Renders any GLB/glTF model, SVG, or image in a floating studio scene through a 1-bit Bayer, halftone, or Floyd–Steinberg dither. Built on three.js. | `npx shadcn@latest add https://canvasui.dev/r/dithered-object-vanilla.json` |
| droplets-react | registry:component | Rain droplets that run down the screen and refract your page behind them. The HTML stays interactive. No dependencies. | `npx shadcn@latest add https://canvasui.dev/r/droplets-react.json` |
| droplets-vue | registry:component | Rain droplets that run down the screen and refract your page behind them. The HTML stays interactive. No dependencies. | `npx shadcn@latest add https://canvasui.dev/r/droplets-vue.json` |
| droplets-svelte | registry:component | Rain droplets that run down the screen and refract your page behind them. The HTML stays interactive. No dependencies. | `npx shadcn@latest add https://canvasui.dev/r/droplets-svelte.json` |
| droplets-solid | registry:component | Rain droplets that run down the screen and refract your page behind them. The HTML stays interactive. No dependencies. | `npx shadcn@latest add https://canvasui.dev/r/droplets-solid.json` |
| droplets-preact | registry:component | Rain droplets that run down the screen and refract your page behind them. The HTML stays interactive. No dependencies. | `npx shadcn@latest add https://canvasui.dev/r/droplets-preact.json` |
| droplets-vanilla | registry:component | Rain droplets that run down the screen and refract your page behind them. The HTML stays interactive. No dependencies. | `npx shadcn@latest add https://canvasui.dev/r/droplets-vanilla.json` |
| particle-object-react | registry:component | Rebuilds any GLB/glTF model, SVG, or image as a cloud of particles that the cursor pushes, swirls, and springs back into shape. Built on three.js. | `npx shadcn@latest add https://canvasui.dev/r/particle-object-react.json` |
| particle-object-vue | registry:component | Rebuilds any GLB/glTF model, SVG, or image as a cloud of particles that the cursor pushes, swirls, and springs back into shape. Built on three.js. | `npx shadcn@latest add https://canvasui.dev/r/particle-object-vue.json` |
| particle-object-svelte | registry:component | Rebuilds any GLB/glTF model, SVG, or image as a cloud of particles that the cursor pushes, swirls, and springs back into shape. Built on three.js. | `npx shadcn@latest add https://canvasui.dev/r/particle-object-svelte.json` |
| particle-object-solid | registry:component | Rebuilds any GLB/glTF model, SVG, or image as a cloud of particles that the cursor pushes, swirls, and springs back into shape. Built on three.js. | `npx shadcn@latest add https://canvasui.dev/r/particle-object-solid.json` |
| particle-object-preact | registry:component | Rebuilds any GLB/glTF model, SVG, or image as a cloud of particles that the cursor pushes, swirls, and springs back into shape. Built on three.js. | `npx shadcn@latest add https://canvasui.dev/r/particle-object-preact.json` |
| particle-object-vanilla | registry:component | Rebuilds any GLB/glTF model, SVG, or image as a cloud of particles that the cursor pushes, swirls, and springs back into shape. Built on three.js. | `npx shadcn@latest add https://canvasui.dev/r/particle-object-vanilla.json` |
| particle-reveal-react | registry:component | Renders your page as fine grayscale dust that merges back into crisp UI around the cursor. The HTML stays interactive. No dependencies. | `npx shadcn@latest add https://canvasui.dev/r/particle-reveal-react.json` |
| particle-reveal-vue | registry:component | Renders your page as fine grayscale dust that merges back into crisp UI around the cursor. The HTML stays interactive. No dependencies. | `npx shadcn@latest add https://canvasui.dev/r/particle-reveal-vue.json` |
| particle-reveal-svelte | registry:component | Renders your page as fine grayscale dust that merges back into crisp UI around the cursor. The HTML stays interactive. No dependencies. | `npx shadcn@latest add https://canvasui.dev/r/particle-reveal-svelte.json` |
| particle-reveal-solid | registry:component | Renders your page as fine grayscale dust that merges back into crisp UI around the cursor. The HTML stays interactive. No dependencies. | `npx shadcn@latest add https://canvasui.dev/r/particle-reveal-solid.json` |
| particle-reveal-preact | registry:component | Renders your page as fine grayscale dust that merges back into crisp UI around the cursor. The HTML stays interactive. No dependencies. | `npx shadcn@latest add https://canvasui.dev/r/particle-reveal-preact.json` |
| particle-reveal-vanilla | registry:component | Renders your page as fine grayscale dust that merges back into crisp UI around the cursor. The HTML stays interactive. No dependencies. | `npx shadcn@latest add https://canvasui.dev/r/particle-reveal-vanilla.json` |
| particle-scroll-react | registry:component | Dissolves everything below a chosen line into drifting sand that reassembles as you scroll. The HTML stays interactive. No dependencies. | `npx shadcn@latest add https://canvasui.dev/r/particle-scroll-react.json` |
| particle-scroll-vue | registry:component | Dissolves everything below a chosen line into drifting sand that reassembles as you scroll. The HTML stays interactive. No dependencies. | `npx shadcn@latest add https://canvasui.dev/r/particle-scroll-vue.json` |
| particle-scroll-svelte | registry:component | Dissolves everything below a chosen line into drifting sand that reassembles as you scroll. The HTML stays interactive. No dependencies. | `npx shadcn@latest add https://canvasui.dev/r/particle-scroll-svelte.json` |
| particle-scroll-solid | registry:component | Dissolves everything below a chosen line into drifting sand that reassembles as you scroll. The HTML stays interactive. No dependencies. | `npx shadcn@latest add https://canvasui.dev/r/particle-scroll-solid.json` |
| particle-scroll-preact | registry:component | Dissolves everything below a chosen line into drifting sand that reassembles as you scroll. The HTML stays interactive. No dependencies. | `npx shadcn@latest add https://canvasui.dev/r/particle-scroll-preact.json` |
| particle-scroll-vanilla | registry:component | Dissolves everything below a chosen line into drifting sand that reassembles as you scroll. The HTML stays interactive. No dependencies. | `npx shadcn@latest add https://canvasui.dev/r/particle-scroll-vanilla.json` |
| peel-react | registry:component | Peels your page back from a chosen edge as the cursor approaches, revealing a second layer underneath. The HTML stays interactive. No dependencies. | `npx shadcn@latest add https://canvasui.dev/r/peel-react.json` |
| peel-vue | registry:component | Peels your page back from a chosen edge as the cursor approaches, revealing a second layer underneath. The HTML stays interactive. No dependencies. | `npx shadcn@latest add https://canvasui.dev/r/peel-vue.json` |
| peel-svelte | registry:component | Peels your page back from a chosen edge as the cursor approaches, revealing a second layer underneath. The HTML stays interactive. No dependencies. | `npx shadcn@latest add https://canvasui.dev/r/peel-svelte.json` |
| peel-solid | registry:component | Peels your page back from a chosen edge as the cursor approaches, revealing a second layer underneath. The HTML stays interactive. No dependencies. | `npx shadcn@latest add https://canvasui.dev/r/peel-solid.json` |
| peel-preact | registry:component | Peels your page back from a chosen edge as the cursor approaches, revealing a second layer underneath. The HTML stays interactive. No dependencies. | `npx shadcn@latest add https://canvasui.dev/r/peel-preact.json` |
| peel-vanilla | registry:component | Peels your page back from a chosen edge as the cursor approaches, revealing a second layer underneath. The HTML stays interactive. No dependencies. | `npx shadcn@latest add https://canvasui.dev/r/peel-vanilla.json` |
| glitch-react | registry:component | Broadcast glitch bursts that tear the page into shifted slices with RGB splits, corrupted blocks, and analog noise, then settle back to a clean read. The HTML … | `npx shadcn@latest add https://canvasui.dev/r/glitch-react.json` |
| glitch-vue | registry:component | Broadcast glitch bursts that tear the page into shifted slices with RGB splits, corrupted blocks, and analog noise, then settle back to a clean read. The HTML … | `npx shadcn@latest add https://canvasui.dev/r/glitch-vue.json` |
| glitch-svelte | registry:component | Broadcast glitch bursts that tear the page into shifted slices with RGB splits, corrupted blocks, and analog noise, then settle back to a clean read. The HTML … | `npx shadcn@latest add https://canvasui.dev/r/glitch-svelte.json` |
| glitch-solid | registry:component | Broadcast glitch bursts that tear the page into shifted slices with RGB splits, corrupted blocks, and analog noise, then settle back to a clean read. The HTML … | `npx shadcn@latest add https://canvasui.dev/r/glitch-solid.json` |
| glitch-preact | registry:component | Broadcast glitch bursts that tear the page into shifted slices with RGB splits, corrupted blocks, and analog noise, then settle back to a clean read. The HTML … | `npx shadcn@latest add https://canvasui.dev/r/glitch-preact.json` |
| glitch-vanilla | registry:component | Broadcast glitch bursts that tear the page into shifted slices with RGB splits, corrupted blocks, and analog noise, then settle back to a clean read. The HTML … | `npx shadcn@latest add https://canvasui.dev/r/glitch-vanilla.json` |
| frost-react | registry:component | Covers your page in a frozen pane of ice with refraction and frost grain. Hovering melts a hole through the frost, which freezes back over. The HTML stays inte… | `npx shadcn@latest add https://canvasui.dev/r/frost-react.json` |
| frost-vue | registry:component | Covers your page in a frozen pane of ice with refraction and frost grain. Hovering melts a hole through the frost, which freezes back over. The HTML stays inte… | `npx shadcn@latest add https://canvasui.dev/r/frost-vue.json` |
| frost-svelte | registry:component | Covers your page in a frozen pane of ice with refraction and frost grain. Hovering melts a hole through the frost, which freezes back over. The HTML stays inte… | `npx shadcn@latest add https://canvasui.dev/r/frost-svelte.json` |
| frost-solid | registry:component | Covers your page in a frozen pane of ice with refraction and frost grain. Hovering melts a hole through the frost, which freezes back over. The HTML stays inte… | `npx shadcn@latest add https://canvasui.dev/r/frost-solid.json` |
| frost-preact | registry:component | Covers your page in a frozen pane of ice with refraction and frost grain. Hovering melts a hole through the frost, which freezes back over. The HTML stays inte… | `npx shadcn@latest add https://canvasui.dev/r/frost-preact.json` |
| frost-vanilla | registry:component | Covers your page in a frozen pane of ice with refraction and frost grain. Hovering melts a hole through the frost, which freezes back over. The HTML stays inte… | `npx shadcn@latest add https://canvasui.dev/r/frost-vanilla.json` |
| hex-float-react | registry:component | Renders the live page onto a floor of shiny beveled hex tiles that lean back in perspective, bob gently, and rise toward the cursor. The HTML stays interactive… | `npx shadcn@latest add https://canvasui.dev/r/hex-float-react.json` |
| hex-float-vue | registry:component | Renders the live page onto a floor of shiny beveled hex tiles that lean back in perspective, bob gently, and rise toward the cursor. The HTML stays interactive… | `npx shadcn@latest add https://canvasui.dev/r/hex-float-vue.json` |
| hex-float-svelte | registry:component | Renders the live page onto a floor of shiny beveled hex tiles that lean back in perspective, bob gently, and rise toward the cursor. The HTML stays interactive… | `npx shadcn@latest add https://canvasui.dev/r/hex-float-svelte.json` |
| hex-float-solid | registry:component | Renders the live page onto a floor of shiny beveled hex tiles that lean back in perspective, bob gently, and rise toward the cursor. The HTML stays interactive… | `npx shadcn@latest add https://canvasui.dev/r/hex-float-solid.json` |
| hex-float-preact | registry:component | Renders the live page onto a floor of shiny beveled hex tiles that lean back in perspective, bob gently, and rise toward the cursor. The HTML stays interactive… | `npx shadcn@latest add https://canvasui.dev/r/hex-float-preact.json` |
| hex-float-vanilla | registry:component | Renders the live page onto a floor of shiny beveled hex tiles that lean back in perspective, bob gently, and rise toward the cursor. The HTML stays interactive… | `npx shadcn@latest add https://canvasui.dev/r/hex-float-vanilla.json` |
| retro-dither-react | registry:component | A retro dither lens that pixelates and quantizes your page around the cursor. The HTML stays interactive. No dependencies. | `npx shadcn@latest add https://canvasui.dev/r/retro-dither-react.json` |
| retro-dither-vue | registry:component | A retro dither lens that pixelates and quantizes your page around the cursor. The HTML stays interactive. No dependencies. | `npx shadcn@latest add https://canvasui.dev/r/retro-dither-vue.json` |
| retro-dither-svelte | registry:component | A retro dither lens that pixelates and quantizes your page around the cursor. The HTML stays interactive. No dependencies. | `npx shadcn@latest add https://canvasui.dev/r/retro-dither-svelte.json` |
| retro-dither-solid | registry:component | A retro dither lens that pixelates and quantizes your page around the cursor. The HTML stays interactive. No dependencies. | `npx shadcn@latest add https://canvasui.dev/r/retro-dither-solid.json` |
| retro-dither-preact | registry:component | A retro dither lens that pixelates and quantizes your page around the cursor. The HTML stays interactive. No dependencies. | `npx shadcn@latest add https://canvasui.dev/r/retro-dither-preact.json` |
| retro-dither-vanilla | registry:component | A retro dither lens that pixelates and quantizes your page around the cursor. The HTML stays interactive. No dependencies. | `npx shadcn@latest add https://canvasui.dev/r/retro-dither-vanilla.json` |
| ripple-react | registry:component | Water ripples that spread from every click and refract the live page like a pond surface, with dispersion and light glints on the crests. The HTML stays intera… | `npx shadcn@latest add https://canvasui.dev/r/ripple-react.json` |
| ripple-vue | registry:component | Water ripples that spread from every click and refract the live page like a pond surface, with dispersion and light glints on the crests. The HTML stays intera… | `npx shadcn@latest add https://canvasui.dev/r/ripple-vue.json` |
| ripple-svelte | registry:component | Water ripples that spread from every click and refract the live page like a pond surface, with dispersion and light glints on the crests. The HTML stays intera… | `npx shadcn@latest add https://canvasui.dev/r/ripple-svelte.json` |
| ripple-solid | registry:component | Water ripples that spread from every click and refract the live page like a pond surface, with dispersion and light glints on the crests. The HTML stays intera… | `npx shadcn@latest add https://canvasui.dev/r/ripple-solid.json` |
| ripple-preact | registry:component | Water ripples that spread from every click and refract the live page like a pond surface, with dispersion and light glints on the crests. The HTML stays intera… | `npx shadcn@latest add https://canvasui.dev/r/ripple-preact.json` |
| ripple-vanilla | registry:component | Water ripples that spread from every click and refract the live page like a pond surface, with dispersion and light glints on the crests. The HTML stays intera… | `npx shadcn@latest add https://canvasui.dev/r/ripple-vanilla.json` |
| shatter-react | registry:component | Shatters your page into 3D glass shards that lift, tilt, and float around the cursor, refracting the content beneath them, with perspective and soft shadows. T… | `npx shadcn@latest add https://canvasui.dev/r/shatter-react.json` |
| shatter-vue | registry:component | Shatters your page into 3D glass shards that lift, tilt, and float around the cursor, refracting the content beneath them, with perspective and soft shadows. T… | `npx shadcn@latest add https://canvasui.dev/r/shatter-vue.json` |
| shatter-svelte | registry:component | Shatters your page into 3D glass shards that lift, tilt, and float around the cursor, refracting the content beneath them, with perspective and soft shadows. T… | `npx shadcn@latest add https://canvasui.dev/r/shatter-svelte.json` |
| shatter-solid | registry:component | Shatters your page into 3D glass shards that lift, tilt, and float around the cursor, refracting the content beneath them, with perspective and soft shadows. T… | `npx shadcn@latest add https://canvasui.dev/r/shatter-solid.json` |
| shatter-preact | registry:component | Shatters your page into 3D glass shards that lift, tilt, and float around the cursor, refracting the content beneath them, with perspective and soft shadows. T… | `npx shadcn@latest add https://canvasui.dev/r/shatter-preact.json` |
| shatter-vanilla | registry:component | Shatters your page into 3D glass shards that lift, tilt, and float around the cursor, refracting the content beneath them, with perspective and soft shadows. T… | `npx shadcn@latest add https://canvasui.dev/r/shatter-vanilla.json` |
| vhs-react | registry:component | Plays your page back like a worn VHS tape, with tape wave, head-switch noise, chroma bleed, and grain. The HTML stays interactive. No dependencies. | `npx shadcn@latest add https://canvasui.dev/r/vhs-react.json` |
| vhs-vue | registry:component | Plays your page back like a worn VHS tape, with tape wave, head-switch noise, chroma bleed, and grain. The HTML stays interactive. No dependencies. | `npx shadcn@latest add https://canvasui.dev/r/vhs-vue.json` |
| vhs-svelte | registry:component | Plays your page back like a worn VHS tape, with tape wave, head-switch noise, chroma bleed, and grain. The HTML stays interactive. No dependencies. | `npx shadcn@latest add https://canvasui.dev/r/vhs-svelte.json` |
| vhs-solid | registry:component | Plays your page back like a worn VHS tape, with tape wave, head-switch noise, chroma bleed, and grain. The HTML stays interactive. No dependencies. | `npx shadcn@latest add https://canvasui.dev/r/vhs-solid.json` |
| vhs-preact | registry:component | Plays your page back like a worn VHS tape, with tape wave, head-switch noise, chroma bleed, and grain. The HTML stays interactive. No dependencies. | `npx shadcn@latest add https://canvasui.dev/r/vhs-preact.json` |
| vhs-vanilla | registry:component | Plays your page back like a worn VHS tape, with tape wave, head-switch noise, chroma bleed, and grain. The HTML stays interactive. No dependencies. | `npx shadcn@latest add https://canvasui.dev/r/vhs-vanilla.json` |
| laser-react | registry:component | Hides everything below a glowing laser beam near the bottom of the viewport. Scrolling prints new content in from behind it. The HTML stays interactive. No dep… | `npx shadcn@latest add https://canvasui.dev/r/laser-react.json` |
| laser-vue | registry:component | Hides everything below a glowing laser beam near the bottom of the viewport. Scrolling prints new content in from behind it. The HTML stays interactive. No dep… | `npx shadcn@latest add https://canvasui.dev/r/laser-vue.json` |
| laser-svelte | registry:component | Hides everything below a glowing laser beam near the bottom of the viewport. Scrolling prints new content in from behind it. The HTML stays interactive. No dep… | `npx shadcn@latest add https://canvasui.dev/r/laser-svelte.json` |
| laser-solid | registry:component | Hides everything below a glowing laser beam near the bottom of the viewport. Scrolling prints new content in from behind it. The HTML stays interactive. No dep… | `npx shadcn@latest add https://canvasui.dev/r/laser-solid.json` |
| laser-preact | registry:component | Hides everything below a glowing laser beam near the bottom of the viewport. Scrolling prints new content in from behind it. The HTML stays interactive. No dep… | `npx shadcn@latest add https://canvasui.dev/r/laser-preact.json` |
| laser-vanilla | registry:component | Hides everything below a glowing laser beam near the bottom of the viewport. Scrolling prints new content in from behind it. The HTML stays interactive. No dep… | `npx shadcn@latest add https://canvasui.dev/r/laser-vanilla.json` |
| glass-react | registry:component | A cursor-following glass lens that refracts your page like real glass, with a crystal ball zoom over target elements. The HTML stays interactive. No dependenci… | `npx shadcn@latest add https://canvasui.dev/r/glass-react.json` |
| glass-vue | registry:component | A cursor-following glass lens that refracts your page like real glass, with a crystal ball zoom over target elements. The HTML stays interactive. No dependenci… | `npx shadcn@latest add https://canvasui.dev/r/glass-vue.json` |
| glass-svelte | registry:component | A cursor-following glass lens that refracts your page like real glass, with a crystal ball zoom over target elements. The HTML stays interactive. No dependenci… | `npx shadcn@latest add https://canvasui.dev/r/glass-svelte.json` |
| glass-solid | registry:component | A cursor-following glass lens that refracts your page like real glass, with a crystal ball zoom over target elements. The HTML stays interactive. No dependenci… | `npx shadcn@latest add https://canvasui.dev/r/glass-solid.json` |
| glass-preact | registry:component | A cursor-following glass lens that refracts your page like real glass, with a crystal ball zoom over target elements. The HTML stays interactive. No dependenci… | `npx shadcn@latest add https://canvasui.dev/r/glass-preact.json` |
| glass-vanilla | registry:component | A cursor-following glass lens that refracts your page like real glass, with a crystal ball zoom over target elements. The HTML stays interactive. No dependenci… | `npx shadcn@latest add https://canvasui.dev/r/glass-vanilla.json` |
| glass-object-react | registry:component | Turns any GLB/glTF model, SVG, or image into a floating liquid-glass object with real refraction, chromatic dispersion, frost, and tinted absorption, lit by a … | `npx shadcn@latest add https://canvasui.dev/r/glass-object-react.json` |
| glass-object-vue | registry:component | Turns any GLB/glTF model, SVG, or image into a floating liquid-glass object with real refraction, chromatic dispersion, frost, and tinted absorption, lit by a … | `npx shadcn@latest add https://canvasui.dev/r/glass-object-vue.json` |
| glass-object-svelte | registry:component | Turns any GLB/glTF model, SVG, or image into a floating liquid-glass object with real refraction, chromatic dispersion, frost, and tinted absorption, lit by a … | `npx shadcn@latest add https://canvasui.dev/r/glass-object-svelte.json` |
| glass-object-solid | registry:component | Turns any GLB/glTF model, SVG, or image into a floating liquid-glass object with real refraction, chromatic dispersion, frost, and tinted absorption, lit by a … | `npx shadcn@latest add https://canvasui.dev/r/glass-object-solid.json` |
| glass-object-preact | registry:component | Turns any GLB/glTF model, SVG, or image into a floating liquid-glass object with real refraction, chromatic dispersion, frost, and tinted absorption, lit by a … | `npx shadcn@latest add https://canvasui.dev/r/glass-object-preact.json` |
| glass-object-vanilla | registry:component | Turns any GLB/glTF model, SVG, or image into a floating liquid-glass object with real refraction, chromatic dispersion, frost, and tinted absorption, lit by a … | `npx shadcn@latest add https://canvasui.dev/r/glass-object-vanilla.json` |

## For AI agents

```text
You are adding components from @canvas-ui to a shadcn-compatible project.
1. Read this file (https://sh4dcn.vercel.app/md/canvas-ui.md) for the component list.
2. Fetch the machine-readable index: https://canvasui.dev/r/registry.json
3. Install a single component with its install command from the table above.
4. Full structured record: https://sh4dcn.vercel.app/json (library slug: canvas-ui).
```