Installation

PRIZM is distributed via copy-paste, but every consumer still needs the same peer dependencies and token setup. This page walks through both.

Peer dependencies

Required by every PRIZM component:

bash

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

Tailwind CSS v4 config

PRIZM uses Tailwind v4's CSS-first configuration. Add this PostCSS config to your project:

// postcss.config.mjs
export default {
  plugins: {
    "@tailwindcss/postcss": {},
  },
};

Add tokens to your global CSS

Copy styles/tokens/ and styles/fonts.css from PRIZM into your project, then import them in your global stylesheet (typically app/globals.css).

Add the cn utility

Every PRIZM component depends on a small cn() helper at @/lib/utils:

tsx

// lib/utils.ts
import { type ClassValue, clsx } from "clsx";
import { twMerge } from "tailwind-merge";

export function cn(...inputs: ClassValue[]) {
  return twMerge(clsx(inputs));
}

Set the theme at the root

html

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

For interactive theme switching, copy lib/theme-context.tsx from PRIZM and wrap your app in <ThemeProvider>.

Copy your first component

You're ready. Visit any component page and copy its source. Components go in components/ui/ in your project.