> Fetch the complete documentation index at: https://wasp.sh/llms.txt
---

# Radix Themes

:::note
Last checked with Wasp 0.24 and Radix Themes 3.

This guide depends on external libraries or services, so it may become outdated over time. We do our best to keep it up to date, but make sure to check their documentation for any changes.
:::

This guide shows you how to integrate the [Radix Themes](https://www.radix-ui.com/themes) component library into your Wasp application.

## Setting up Radix Themes

### 1. Install Radix Themes

Install the Radix Themes package:

```bash
npm install @radix-ui/themes
```

### 2. Create a Root Component if it doesn't exist

Due to how Radix works, we'll need to have a single component that wraps all the pages in our app. In Wasp, this is done through the `rootComponent` configuration:

```ts title="main.wasp.ts"
import { app } from "@wasp.sh/spec"
import { Layout } from "./src/Layout" with { type: "ref" }

export default app({
  name: "MyApp",
  wasp: { version: "^0.24.0" },
  title: "My App",
  head: ["<link rel='icon' href='/favicon.ico' />"],
  client: {
    rootComponent: Layout,
  },
  // ...
})
```

If you already have a root component in your Wasp app, open that file and skip to the next step. If you don't have one, create a new file with an empty component that will serve as the root:

```tsx title="src/Layout.tsx"
import type { ReactNode } from "react";

export function Layout({ children }: { children?: ReactNode }) {
  return children;
}
```

### 3. Add Radix Themes to your root component

In your root component, we'll wrap the `children` with Radix Theme's `Theme` component, and import their CSS stylesheet:

```tsx title="src/Layout.tsx"
import type { ReactNode } from "react";
import "@radix-ui/themes/styles.css";
import { Theme } from "@radix-ui/themes";

export function Layout({ children }: { children?: ReactNode }) {
  return <Theme>{children}</Theme>;
}
```

### 4. Use Radix Themes components

Now you can use Radix Themes components anywhere in your application:

```tsx title="src/MainPage.tsx"
import { Flex, Text, Button } from "@radix-ui/themes";

export const MainPage = () => {
  return (
    <Flex direction="column" gap="2">
      <Text>Hello from Radix Themes :)</Text>
      <Button>Let's go</Button>
    </Flex>
  );
};
```

That's it!

## Customizing the theme

You can customize the theme by passing props to the `Theme` component:

```tsx title="src/Layout.tsx"
import type { ReactNode } from "react";
import "@radix-ui/themes/styles.css";
import { Theme } from "@radix-ui/themes";

export function Layout({ children }: { children?: ReactNode }) {
  return (
    <Theme accentColor="crimson" grayColor="sand" radius="large" scaling="95%">
      {children}
    </Theme>
  );
}
```

See the [Radix Themes documentation](https://www.radix-ui.com/themes/docs/overview/getting-started) for more customization options.