Theming
How to customize the visual output of Clarx components.
Because you own the source, customization is direct. You don't override a theme file — you edit the component.
How visual decisions are encoded
Each component uses CVA (class-variance-authority) to map semantic props to Tailwind utility classes. The intent × appearance combinations are declared as compound variants in the component file:
// badge.tsx
cva(base, {
compoundVariants: [
{ intent: 'success', appearance: 'soft', className: 'bg-green-50 text-green-700 ...' },
{ intent: 'success', appearance: 'solid', className: 'bg-green-600 text-white ...' },
// ...
]
})To change what success looks like, edit those classes. That's the entire theming model.
Dark mode
All components use Tailwind's dark: variant. Toggle dark mode by adding the dark class to your root <html> element.
Extending keywords
The keyword prop is a record you own. Adding a domain-specific state:
// 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' },
}Tailwind CSS v4
Components use Tailwind utility classes directly. No custom theme variables are required. If you want to define shared color tokens for your project:
@import 'tailwindcss';
@theme {
--color-brand-500: oklch(0.55 0.22 300);
}Then reference text-brand-500, bg-brand-500, etc. in your component variants.