Installation

Atelier UI is built on Tailwind CSS v4. If your project doesn't use it yet, follow the Tailwind CSS installation guide first.

WebGL components render through one shared canvas. Install the provider and wrap your app root before using them:

npx atelier-ui add webgl-provider

import { WebglProvider } from "@/components/webgl-provider";

export default function RootLayout({ children }) {
  return <WebglProvider>{children}</WebglProvider>;
}

Separate WebGL contexts can't share resources or post-processing, so one shared canvas avoids duplicated GPU work across effects.

For more information about configuring the canvas, see the WebGL Provider reference.

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