@six-vallees/ui-react

Cairn React components — the Six Vallées design system UI, driven by the Cairn tokens. Neo-grotesque, grayscale-first, WCAG AA, light and dark.

Cairn is Six Vallées' own system (Zone C). Client and prospect projects carry their own brand — this package is not meant for them.

Install

pnpm add @six-vallees/ui-react @six-vallees/tokens

react and react-dom are peers; @phosphor-icons/react is an optional peer (only for Icon).

Use

import { Button } from '@six-vallees/ui-react';

<Button variant="primary" size="md">Save</Button>;

The components style themselves with Cairn's token utilities (bg-primary, rounded-control, …). Wire them once with the Tailwind preset from @six-vallees/tokens, and tell Tailwind to scan this package so those classes are generated:

@import "tailwindcss";
@import "@six-vallees/tokens/theme";
@source "../node_modules/@six-vallees/ui-react/dist";

Full setup + a working example: Get started.

Components

| | | | --- | --- | | Button | Four variants, three sizes, asChild. | | Icon | Phosphor wrapper, preset sizes, accessible by default. | | Logo / LogoMark | Six Vallées wordmark + symbol, currentColor. | | Sparkline | Compact axis-less trend line. | | AreaChart · BarChart | Line/area and bar, SSR-safe SVG. | | Stat | Metric with optional delta + trailing sparkline. | | Ring · SegmentedBar | Radial progress and share-of-total, grayscale-first. |

Helpers: categorical, sequential, chartToken (data-viz color, sys.chart.* tokens).

Notes

• Built to ESM + type declarations (tsup); tree-shakeable (sideEffects: false).
• No CSS is shipped — components carry Tailwind class strings; your Tailwind generates them.