Installation

This library is built on Tailwind CSS v4. If your project doesn't already use it, follow the Tailwind CSS installation guide before continuing.

You only need one <Canvas> for the whole app. Place it at your app's root with <WebglPortal /> inside. It connects components like CurveMedia to the Canvas so they can render their effects from anywhere in your React tree.

npx atelier-ui add webgl-portal

import { Canvas } from "@react-three/fiber";
import { WebglPortal } from "./webgl-portal";

// The canvas must cover the full viewport
<Canvas style={{ position: "fixed", inset: 0, pointerEvents: "none" }}>
  {/* required for components used elsewhere in your tree */}
  <WebglPortal />

  {/* components that live inside the Canvas go here */}
</Canvas>;

Pro components require a license. Copy your key from the panel at the top of this page and add it to .env.local.

ATELIER_PRO_KEY=<your-license-key>

Restart your dev server after adding the key.

Pick a component from the docs, then install it:

• CLI — installs the source and any shared dependencies.
• Manual — copy each file by hand from the component page.

npx atelier-ui add fluid-distortion