Getting started

Candour UI is Candour’s UI kit for building tools, such as reports and dashboards, rather than marketing websites. It provides design tokens and Vue 3 components, published as @withcandour/ui.

Install

npm install @withcandour/ui

Vue 3.5 or later is a peer dependency.

Add the styles

Import the stylesheet once, in your app’s entry. It contains the design tokens (CSS custom properties) and every component’s styles, all in the cui cascade layer, so your own styles win without specificity fights.

import '@withcandour/ui/style.css';

Styles in a cascade layer lose to unlayered styles and to layers declared after it. If your app has its own CSS reset, put it in a layer declared before cui, or the reset will restyle the components:

@layer reset, cui;

The components use Inter. Load it in your app, for example with @fontsource/inter.

Use a component

<script setup lang="ts">
import { CuiButton } from '@withcandour/ui';
</script>

<template>
    <CuiButton variant="cta" @click="runAudit">Run audit</CuiButton>
</template>

Themes

The kit has light and dark themes, and follows the operating system by default. useCuiTheme() reads and sets the theme, saves the choice and sets data-theme on <html>:

import { useCuiTheme } from '@withcandour/ui';

const { theme, setTheme } = useCuiTheme(); // theme: 'light' | 'dark' | 'system'
setTheme('dark');

To apply a saved theme before the page first paints (so a dark page doesn’t flash light), put cuiThemeScript in an inline script in <head>, before the stylesheet:

import { cuiThemeScript } from '@withcandour/ui';
// render <script>{cuiThemeScript}</script> in <head>