Installation

npmpnpmyarn

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

pnpm add @arun-dev/tokens @arun-dev/headless @arun-dev/ui

yarn add @arun-dev/tokens @arun-dev/headless @arun-dev/ui

@arun-dev/headless is a peer dependency of @arun-dev/ui: npm installs it on its own, pnpm and yarn do not, so the commands name it.

Behaviour only

Styling the components yourself? Install @arun-dev/headless on its own — it needs no token layer and loads no stylesheet. The rest of this page covers the styled packages.

Load the styles

// 1. Structural primitives and component tokens
import '@arun-dev/tokens/base';
// 2. A brand — palette and semantic colours: the default, the published arun brand
//    ('@arun-dev/tokens/brands/arun'), or your own from createBrand()
import '@arun-dev/tokens/brands/default';
// 3. Component styles
import '@arun-dev/ui/components.css';

All three are required

@arun-dev/tokens/base provides only the brand-independent primitives — it does not include a brand. Without step 2 every --color-* token is undefined, and components render with transparent backgrounds and inherited text colour.

What the reset changes

components.css starts with a small reset. It removes the browser’s default margins, so spacing comes from gaps and tokens alone. Lists keep their bullets and numbers, because in running text they’re part of the content.

A list used for layout, such as a nav or a row of cards, opts out of its markers with role="list":

<ul role="list" class="tags">
  <li>React</li>
  <li>CSS</li>
</ul>

role="list" also keeps the list announced as a list by VoiceOver in Safari, which can stop announcing a list styled with list-style: none. A Stack or a Grid rendered as a list drops the markers itself. The Lists guide shows both kinds, with a playground.

Use a component

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

export function Example() {
  return (
    <Card lift>
      <Badge tone="success">Shipped</Badge>
      <Button variant="primary">Continue</Button>
    </Card>
  );
}

Requirements

React	19 or newer (react and react-dom are peer dependencies)
Bundler	anything that resolves exports and imports CSS — Vite, webpack, Next.js, Astro
Browsers	anything supporting CSS custom properties and @layer

Fonts

@arun-dev/tokens/base deliberately omits @font-face — font loading is a consumer concern. Next.js apps should use next/font/local in layout.tsx; everyone else can import @arun-dev/tokens/primitives/fonts directly.