How To Use Radix UI Themes

Radix UI Themes offers an open-source library of pre-designed components to accelerate development and simplify maintenance. The plug-and-play nature means no configuration is needed - just import and start building.

Author

CTRL ALT News
October 7th, 2023

How To Use Radix UI Themes

Radix UI Themes offers an open-source library of pre-designed components to accelerate development and simplify maintenance. The plug-and-play nature means no configuration is needed - just import and start building.

By leveraging the unopinionated Radix UI Primitives as a base, Radix UI Themes provides ready-made themes that are easy to install, customize, and use. The streamlined theming system makes it straightforward to update styles across components.

For any modern web project, Radix UI Themes is an essential tool that allows you to focus on creating great user experiences instead of reinventing the wheel.

Getting Started

1. Install

Use one of the following commands depending on your package manager to install the Radix UI Themes package: 

npm install @radix-ui/themes
yarn add @radix-ui/themes
pnpm add @radix-ui/themes

2. Import The CSS File

Import the global CSS file at the root of your application: 

import '@radix-ui/themes/styles.css';

3. Add The Theme Component

Add Theme to your application, wrapping the root component inside of the body: 

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

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

4. Start Using The Components

You are now all set to use the Radix UI Themes Components: 

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

export default function MyApp() {
  return <Button>This is my test button!</Button>;
}

Customizing Themes

The Theme component at the root of your application controls the overall look of your application and its components. It is easy to customize by just passing a handful of probs.

The Theme component is styled by default, but the default styles can easily be changed: 

<Theme
  accentColor="mint"
  grayColor="gray"
  panelBackground="solid"
  scaling="100%"
  radius="full"
>
  <div>My Div</div>
</Theme>

Please visit the docs for the full breakdown of how to customize your Theme component.

Dark Mode

To enable dark mode add the “appearance” prop to the Theme component at the the root of your product: 

<Theme appearance="dark">
  <MyApp />
</Theme>

Hydration Error

It is important to know that Radix UI Themes will automatically set the background color of your app, by injecting a background-color style on the body element in your app.

The Radix UI Themes docs state that it is okay to suppress the hydration warning by doing the following: 

export default function Layout({ children }) {
  return (
    <html suppressHydrationWarning>
      <head />
      <body>{children}</body>
    </html>
  );
}

More about this can be read here.

Style System Preferences

A common application requirement these days is to change the dark/light mode depending on system preferences. This can be tricky to solve by yourself because of SSR, SSG, and client-side hydration considerations. It is therefore recommended to use a third-party library for this.

Radix Themes integrates seamlessly with the popular next-themes library. To set up automatic switching based on system preferences, import ThemeProvider from next-themes, wrap the Theme component in ThemeProvider with the attribute="class" prop, and pass no props to Theme itself - relying solely on next-themes' class switching to handle the appearance changes.

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

export default function () {
  return (
    <ThemeProvider attribute="class">
      <Theme>
        <MyApp />
      </Theme>
    </ThemeProvider>
  );
}

There are different ways to handle system preferences in Radix UI Themes, please visit the docs for more information on this.

Using Components

You are now able to use all the components from the Radix UI Themes library: 

import { Theme, Flex, Badge } from '@radix-ui/themes';
import { ThemeProvider } from 'next-themes';

export default function () {
  return (
    <ThemeProvider attribute="class">
      <Theme>
        <Flex gap="2">
         <Badge color="orange">In progress</Badge>
         <Badge color="blue">In review</Badge>
         <Badge color="green">Complete</Badge>
        </Flex>
      </Theme>
    </ThemeProvider>
  );
}

Radix UI Themes offers a wide variety of components. They can all be found in the docs.

Hopefully, this overview gives you a sense of how Radix UI Themes can help streamline building for the web. Try it out on your next project to see firsthand how it can improve your workflow.