Styling

How to approach styling with Radix Themes.

Introduction

Radix Themes does not come with a built-in styling system. There’s no css or sx prop, and it does not use any styling libraries internally. Under the hood, it’s built with vanilla CSS.

There’s no overhead when it comes to picking a styling technology for your app.

What you get

The components in Radix Themes are relatively closed—they come with a set of styles that aren’t always easily overridden. They are customizable within what’s allowed by their props and the theme configuration.

However, you also get access to the same CSS variables that power the Radix Themes components. You can use these tokens to create custom components that naturally feel at home in the original theme. Changes to the token system are treated as breaking.

For more information on specific tokens, refer to the corresponding guides in the Theme section.

Overriding styles

Beyond simple style overrides, we recommend using the components as-is, or create your own versions using the same building blocks.