@arun-dev/ui

Brand-agnostic React component library. Components carry no colors of their own — all visual styling resolves through semantic CSS custom properties from @arun-dev/tokens.

Installation

npm install @arun-dev/ui @arun-dev/tokens

Peer dependencies: react >= 19, react-dom >= 19.

Setup — tokens are required

Components read semantic tokens (--color-bg-*, --color-text-*, --color-border-*, …) at render time. Load the tokens and the component styles once, before any component renders:

import '@arun-dev/tokens/base'; // primitives + default brand
import '@arun-dev/ui/components.css'; // all component styles

To use a custom brand instead of the default, replace the brand layer with your own stylesheet — either generated by createBrand() from @arun-dev/tokens/createBrand, or hand-written. Any brand CSS must define every variable in the BrandSemanticContract type.

Individual stylesheets are also exported if you prefer à la carte loading: @arun-dev/ui/css/reset, …/css/btn, …/css/card, …/css/chip, …/css/badge, …/css/metric, …/css/utilities.

Components

import { Button, Card, Chip, Badge } from '@arun-dev/ui';

| Component | Props | | --------- | -------------------------------------------------------------------------------------------------------------------------- | | Button | variant: 'ghost' \| 'primary' — renders <a> when href is given, otherwise <button> (onClick, type, disabled) | | Card | as (element type, default div), lift (hover elevation) | | Chip | variant: 'default' \| 'accent', as: 'span' \| 'button' (with onClick) | | Badge | variant: 'default' \| 'difficulty-beginner' \| 'difficulty-intermediate' \| 'difficulty-advanced' |

All components accept className for composition.

Theming

Light and dark mode come from the token layer — system preference by default, explicit override via data-theme="dark" / data-theme="light" on the root element. Components need no changes.