Token reference

Tokens provide direct access to theme values and give you flexibility to build and customize your own themed components.

Overview

Radix Themes exposes all tokens as CSS Custom Properties, these are consumed internally in all styled components.

You can access them the same way you would any other variable, either directly inside your CSS or inline via the style prop.

Modifying tokens

Token values can be customized by using a separate configuration stylesheet. The simplest way to do so is to create a theme-config.css file and ensure it is imported after the global theme styles:

/* theme-config.css */
.radix-themes {
  --default-font-size: 18px;
}

// app-root.jsx
import '@radix-ui/themes/styles.css';
import './themes-config.css';

import { Theme } from '@radix-ui/themes';

export default function () {
  return (
    <Theme>
      <MyApp />
    </Theme>
  );
}

Tokens

For a comprehensive list of all available tokens, see their respective source files:

• Color
• Radius
• Shadows
• Space
• Typography