# Token exports

> Export a React color palette as CSS variables, SCSS variables, Tailwind colors, JSON, or DTCG design tokens from a separate zero-dependency entry point.

Source: https://chroma-panel.jscrate.dev/react/utils/token-exports
Last updated: 2026-09-21

The `chroma-panel/export` entry turns a named color map into CSS, SCSS,
Tailwind, JSON, or DTCG design tokens. It does not import React or the picker.

## Usage

```ts
import {
  toCssVariables,
  toDesignTokens,
  toScssVariables,
  toTailwindColors,
} from "chroma-panel/export";

const palette = {
  primary: "oklch(62% 0.2 255)",
  "surface-raised": "#ffffff",
};

toCssVariables(palette, { prefix: "brand" });
toScssVariables(palette);
toTailwindColors(palette);
toDesignTokens(palette);
```

`toCssVariables` accepts a selector, prefix and output color space. Names are
normalized into safe lowercase token names. `toDesignTokens` returns objects with
`$type: "color"` and `$value`, suitable for tools that follow the Design Tokens
Community Group shape.