Installation

Install any component with the shadcn CLI, or copy the source straight from its docs page. Either way, the code ends up in your project.

Requirements

Some components are built on the html-in-canvas API and currently need Chrome with the canvas-draw-element flag enabled. Each component page tells you if it applies. Paste this into your address bar, enable the flag, and restart:

For production, Chrome offers an origin trial that enables the API for your visitors without any flags. This site runs on an origin trial token itself, which is why the effects work here in a plain Chrome install. Tokens are bound to a specific domain, so this only benefits canvasui.dev: to get the same on your own site, register your domain for the trial and serve the token via a meta tag or HTTP header. In browsers without support, components fall back automatically: your content renders as regular HTML and no errors are thrown.

Beyond that, TypeScript is recommended, since every file ships as typed source. React components target React 19, Solid components target Solid 1.9, Preact components target Preact 10, Vue components target Vue 3.5, and Svelte components target Svelte 5. Any dependencies a component needs are installed by the CLI and listed on its docs page.

Install with the CLI

Every component has a registry entry per framework. Pick your package manager and framework below, and the docs remember your choice everywhere.

The CLI drops the file into components/canvasui/ in your project (Svelte: src/lib/components/canvasui/, so the $lib import resolves). If you have not used shadcn before, run npx shadcn@latest init first.

Install manually

Prefer not to use a CLI? Open the component page, switch the code block to your framework, copy the file into your project, and import it.

Use it

Wrap the part of your interface the effect should run over. Props are optional and can be changed live.

import { Liquid } from "@/components/canvasui/Liquid";

export default function Page() {
  return (
    <Liquid rainbow style={{ height: 480 }}>
      <YourContent />
    </Liquid>
  );
}

Next steps