Tokens

Free · MIT

Candor's tokens without its colours: the --cd-* variables, Candor's own @theme entries and the motion utilities every item's classes assume. It sets nothing a shadcn project already defines (radius, sidebar, colour roles, type scale, base styles). Every item installs it. A Candor project imports styles/candor.css and needs nothing more; with plain shadcn and your own colours, import styles/candor-tokens.css once, after Tailwind.

Markdown

Version 5.2.0· other versions

This page is for 5.2.0, the current release. An earlier release’s page is the Markdown that release published, so the docs match the version you have installed (candor-lock.json records it).

Not in the docs of 1.3.0, 1.4.0, 1.5.0, 1.5.1, 1.6.0, 1.7.0, 1.8.0, 1.8.1, 1.9.0, 1.9.1, 2.0.0, 2.1.0, 2.2.0, 2.3.0, 2.4.0, 2.5.0, 2.5.1, 2.6.0, 2.6.1 and 2.6.2: the page came later, or had another name then.

Docs pages weren’t kept for 1.0.0, 1.0.1, 1.1.0, 1.1.1, 1.2.0 and 1.2.1: they are kept from 1.3.0 on, and before that only llms.txt was published.

Preview

Install

With the Candor CLI

Open the starter in StackBlitz

Opens the free starter app in StackBlitz, in your browser, on stackblitz.com. Tokens isn’t added for you: run npx candor-ui add tokens in its terminal. The starter’s agent needs an Anthropic API key to chat; without one it shows the components only.

First time? Get started sets up the registry and theme. Or with shadcn directly: npx shadcn@latest add @candor/tokens

Usage

TSX · The example above

"use client"

import { Button } from "@/components/candor/ui/button"

// The tokens a button's classes read: the radius (rounded-button), the control height per density and the press motion
// (cd-press). With plain shadcn and your own colours, import styles/candor-tokens.css after Tailwind to get them.
//
// Every token's name, layer, type, range and default is published as data at /r/tokens-manifest.json:
// { format, version, modes, densities, layers, types, tokens, patterns, slots, slotPatterns, internal }. Each token is
// { name, layer (theme, tokens, density, motion or sound), type (colour, length, duration, easing…),
// default: { light, dark?, hc? }, density?: { compact, spacious }, range?: { min?, max?, unit }, values?, description? };
// dark and hc appear only where they differ from light, and a default of null means Candor sets none. slots lists the
// data-slot names the components render, and internal the --cd-* names Candor's CSS uses itself, not for brand files.
export default function Example() {
  return (
    <div className="grid gap-4 sm:grid-cols-3">
      {(["default", "compact", "spacious"] as const).map((density) => (
        <section key={density} aria-label={`${density} density`} data-density={density === "default" ? undefined : density} className="flex flex-col items-start gap-2 rounded-lg border p-3">
          <code className="text-xs text-muted-foreground">{density === "default" ? "--cd-control-h" : `data-density="${density}"`}</code>
          <Button>Approve</Button>
          <Button variant="outline" size="sm">
            Ask for changes
          </Button>
        </section>
      ))}
    </div>
  )
}