@choice-ui/design-tokens

Modern CSS-in-JS design tokens system with Linaria. Zero runtime overhead, full TypeScript support, and complete theme integration.

Zero RuntimeTypeScriptLinariaTheme Support

View Documentation

Installation

Install Package

Add the design token library to your project using your preferred package manager:

npm install @choice-ui/design-tokens

Initialize Tokens

Import the library to automatically initialize CSS variables. Important: Must be imported before any components render, such as above the App import.

// Import to initialize CSS variables
import "@choice-ui/design-tokens";
import "@choice-ui/design-tokens/tokens.css";
import "@choice-ui/design-tokens/preflight.css";

// Or initialize manually
import { initTokens } from '@choice-ui/design-tokens'
initTokens()

Basic Usage

Import design token functions and start building. Here's the correct import order in your main.tsx:

// main.tsx - Correct import order
import "" // Must be first
import React from 'react'
import ReactDOM from 'react-dom/client'
import App from './App'

ReactDOM.createRoot(document.getElementById('root')!).render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
)

Then use design tokens in your components:

import { spacingList, color } from '@choice-ui/design-tokens'
import { styled } from '@linaria/react'

const Button = styled.button`
  padding: ${spacingList(4, 8)};
  background-color: ${color('bg-accent')};
  color: ${color('fg-on-accent')};
`