Token reference

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

Radix Themes exposes all tokens as CSS Custom Properties. These are consumed internally in all component styles. You can access them the same way you would any other variable, either directly inside your CSS or inline via the style prop.

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

• Color
• Cursors
• Radius
• Scaling
• Shadows
• Space
• Typography

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 './theme-config.css';

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

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