Get started, Cairn

@six-vallees/tokens holds the design tokens and a Tailwind preset;@six-vallees/ui-react holds the React components. Both are public: no auth, no registry config, any project, any build env.

Zone C only. Cairn is Six Vallées' own system. Client and prospect repos carry their own brand tokens, do not wire Cairn into them.

1. Install

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

React and react-dom are peers (you have them); @phosphor-icons/reactis an optional peer, only for Icon.

2. Wire Tailwind

At your CSS entrypoint, after @import "tailwindcss", add the Cairn preset and point Tailwind at the component package:

@import "tailwindcss";
@import "@six-vallees/tokens/theme";
@source "../node_modules/@six-vallees/ui-react/dist"; /* path relative to this file */

The preset brings the --sv-* variables and their utilities in one line: bg-primary,rounded-control, semantic spacing (p-inset-lg), the sv-*type roles, and dark mode. No hand-copied @theme block.

3. Use it

Import components and compose. Everything is token-driven, so a theme swap recolors it all.

Current Tickets

3,484

+7% vs last week

SLA Compliance

92%

-1.3% vs last week

Show code

import { Stat, Sparkline } from '@six-vallees/ui-react';

export default function StatDemo() {
  return (
    <div className="grid w-full grid-cols-2 gap-4 text-on-surface max-md:grid-cols-1">
      <Stat label="Current Tickets" value="3,484" delta={{ value: '+7% vs last week', tone: 'success' }}>
        <Sparkline data={[4, 6, 5, 8, 7, 10, 9, 12]} type="area" className="text-chart-ink" />
      </Stat>
      <Stat label="SLA Compliance" value="92%" delta={{ value: '-1.3% vs last week', tone: 'error' }}>
        <Sparkline data={[12, 10, 11, 8, 9, 7, 6, 5]} className="text-chart-ink" />
      </Stat>
    </div>
  );
}

Dark mode

The preset ships a dark theme. Toggle it by settingdata-theme on any ancestor (try the switch in the top bar):

<html data-theme="dark">

Upgrading

One shared version per package, so no copy drift, bump to move:

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

A per-surface tweak? Use className/variants, or upstream a genuine improvement into Cairn so every surface gets it.

Versioning & stability

Both packages follow SemVer and version independently. patch= fix, minor = backward-compatible addition,major = breaking. A token value can change in a minor (the look shifts, noted in the changelog); renames and removals are majors. Cairn is0.x — the API is still settling.

Pin for stability ("0.3.0") or take a caret ("^0.3.0") for minors and patches.
Redesigns ship on the @next tag first, solatest consumers are never surprised.
Deprecated API is marked @deprecated and kept working until the next major — the component page shows a status badge.

Full policy + release flow:VERSIONING.md. Per-version notes: each package's CHANGELOG.md.

Browse components →Foundations →GitHub →