Getting started

PRIZM uses a copy-paste model. You don't install it as a package — you copy components into your project and own them.

1. Install peer dependencies

PRIZM components rely on a small set of well-supported libraries:

bash

pnpm add @base-ui-components/react class-variance-authority clsx lucide-react tailwind-merge
pnpm add -D tailwindcss@^4.0.0-beta.4

2. Add the PRIZM token CSS

Copy the contents of /styles/tokens/ into your project and import them in your global CSS:

css

@import "tailwindcss";

@import "./tokens/baseline.css";
@import "./tokens/c3-light.css";
@import "./tokens/c3-dark.css";
@import "./tokens/enterprise-light.css";
@import "./tokens/enterprise-dark.css";

3. Set the active theme

Add data attributes to your root <html> element. PRIZM components automatically pick up the active theme.

html

<html data-zone="enterprise" data-mode="light">
  <!-- ... -->
</html>

4. Copy your first component

Browse the component catalogue and copy the source of any stable component into components/ui/ in your project. You now own that component — modify it freely.