Skip to main content
Version: Next
note

Last checked with Wasp 0.21 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.

Radix Themes

This guide shows you how to integrate the Radix Themes component library into your Wasp application.

Setting up Radix Themes​

1. Install Radix Themes​

Install the Radix Themes package:

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:

main.wasp
app MyApp {
  wasp: {
    version: "^0.21.0"
  },
  title: "My App",
  client: {
    rootComponent: import { Layout } from "@src/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:

src/Layout.jsx
export function Layout({ children }) {
  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:

src/Layout.jsx
import "@radix-ui/themes/styles.css";
import { Theme } from "@radix-ui/themes";

export function Layout({ children }) {
  return <Theme>{children}</Theme>;
}

4. Use Radix Themes components​

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

src/MainPage.jsx
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:

src/Layout.jsx
import "@radix-ui/themes/styles.css";
import { Theme } from "@radix-ui/themes";

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

See the Radix Themes documentation for more customization options.