Getting Started

Install

Install the components and default token set:

npm install @rokle/components @rokle/tokens

Setup

Import the token CSS file in your root layout or global stylesheet. This defines all the CSS custom properties that components read from:

@import "@rokle/tokens/tokens.css";

Use components

Import and use components directly. No theme provider, no wrapper, no configuration:

import { Button, Card, Input } from "@rokle/components";

This gives you 71 production-ready components styled with the Rokle default brand. Every component reads its styles from CSS custom properties in tokens.css.

Custom brand

The default tokens.css ships with the Rokle base brand. To use your own brand colours, typography, and personality, generate a custom token set on rokle.app:

Generate: Input your brand colours, pick fonts, set personality scores. Rokle produces a custom tokens.css that drops in as a replacement. Same components, your brand. (Coming soon)

Import: Point Rokle at your existing Figma tokens, Tailwind config, or live website. It extracts your brand and produces Rokle-compatible tokens. (Coming soon)

Drift Audit: After you've been building, scan your codebase for hardcoded values that should reference tokens. (Coming soon)

The components are free and open source. The brand intelligence platform on rokle.app is how you make them yours.

Next steps

Browse the 71 components to see what's available, explore the token architecture in the Tokens guide, or try switching brand systems using the dropdown in the navigation bar to see how one component library serves multiple brands.