Installation

Install the package

$bun add @brika/clay

Every code block on this site shares a package-manager setting, pick your preferred one once and every other install block on the docs site follows.

Peer dependencies

Clay ships as a thin layer over React and Tailwind v4. Install these alongside it if your app doesn’t already have them:

$bun add react react-dom tailwindcss

React 19 is required. Older React majors are not supported.

Load the styles

Clay ships a Tailwind v4 entry point that wires up every token (--primary, --radius, --font-sans, the full theme scale) and registers @source directives for Clay’s own components. Import it once from your Tailwind entry file:

@import "tailwindcss";
@import "@brika/clay/styles";

That single import is enough, no extra @source glob, no token copy-paste. Apply a theme at runtime with applyTheme to swap the palette anywhere in the page.

Use a component

Import each component from its granular entry point for the smallest bundle:

import { Button } from "@brika/clay/components/button";

export function Save() {
  return <Button onClick={save}>Save</Button>;
}

The barrel import (import { Button } from "@brika/clay") also works, pick whichever style your bundler handles most cleanly. Both route to the same ES module.

Tailwind setup

Clay targets Tailwind v4 and is built around CSS-first theming. The @import "@brika/clay/styles" line you added above pulls in every utility Clay’s components use, Tailwind’s @source directives are resolved relative to the imported stylesheet, so they keep working no matter where in your bundle the file lives. No extra configuration is needed when using @tailwindcss/vite.

Next steps

• Browse components to see every primitive in action.
• Read the colors reference to understand the token scale.
• Pick a theme and ship it with one call to applyTheme.