Installation

Clarx components are yours to own. There is no package to install — you copy the source into your project and modify it freely.

This is intentional. When a design system encodes meaning at the API level, you need to be able to adapt those semantics to your product: change what "pending" looks like, add a keyword your domain uses, adjust the visual weight of a state. You cannot do that with a locked-in dependency. You can do it when you own the code.

Prerequisites

• React 18+ project (Next.js 14+, Vite, Remix, or similar)
• Tailwind CSS v4
• TypeScript

Setup

1. Install shared utilities

All components depend on three lightweight packages. Install them once across your project:

pnpm add class-variance-authority clsx tailwind-merge

2. Add the cn utility

Create lib/utils.ts in your project. Every component imports from here:

import { type ClassValue, clsx } from 'clsx'
import { twMerge } from 'tailwind-merge'

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

3. Set up Tailwind CSS v4

pnpm add tailwindcss @tailwindcss/postcss postcss

In your globals.css:

@import 'tailwindcss';

4. Copy a component

Each component page has a Source section at the bottom with the full implementation. Copy it into components/ui/ in your project.

For example, copy the Badge source into components/ui/badge.tsx. Update the import path for cn to match your project structure.

5. Use it

import { Badge } from '@/components/ui/badge'

export default function StatusCell({ job }) {
  return <Badge keyword={job.status} />
}

The keyword prop encodes intent, appearance, dot style, and label in a single value. The component resolves presentation. You declare meaning — the system handles the rest.

Adapting components

Because you own the source, you can extend it directly. Adding a keyword your product uses:

// components/ui/badge.tsx
export const BADGE_KEYWORDS = {
  // ...existing keywords
  'in-review': { intent: 'info', appearance: 'soft', dot: 'pulse', label: 'In review' },
  'approved':  { intent: 'success', appearance: 'solid', label: 'Approved' },
}

This is the model. Not configuration files, not theme overrides — just code you own and can change.