Installation

Get up and running with Radix UI Themes and the Poolar theme in your project.For comprehensive documentation on Radix Themes — including all components, layout primitives, theming options, and API references — visit the official Radix Themes Documentation.

1. Install Radix UI Themes

Install the Radix Themes package. It includes all components, layout primitives, and the theming system.

npm install @radix-ui/themes

Import the Radix Themes stylesheet at the root of your application. This provides all base styles and CSS variables used by the components.

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

Wrap your application with the <Theme> component. This provides the theming context to all child components.

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

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

You can now use any Radix Themes component:

import { Flex, Text, Button } from "@radix-ui/themes";

export function Example() {
  return (
    <Flex direction="column" gap="2">
      <Text>Hello from Radix Themes</Text>
      <Button>Get started</Button>
    </Flex>
  );
}

2. Apply the Poolar Theme

The Poolar theme is a CSS file that overrides the default Radix color scales with custom brand colors. Copy the poolar-theme.css file into your project.Import it after the Radix Themes stylesheet so the custom values take precedence:

import "@radix-ui/themes/styles.css";
import "./poolar-theme.css";

Then configure the <Theme> component to use the custom accent color:

<Theme accentColor="yellow" grayColor="sand" radius="medium">
  {children}
</Theme>

The import order matters. Always import poolar-theme.css after the Radix Themes styles to ensure your color overrides take effect.

The theme file includes both light and dark mode color scales with wide-gamut Display P3 support. You can customize it further by generating new scales at the Radix Colors custom palette tool.

3. Install Radix Icons

Radix Icons is a separate package that provides a crisp set of 15×15 icons, each available as an individual React component. It is optional — install it only if you need icons in your project.

npm install @radix-ui/react-icons

Import the icons you need directly from the package:

import { MagnifyingGlassIcon, PersonIcon, GearIcon } from "@radix-ui/react-icons";

Each icon is a regular SVG component that accepts standard SVG attributes like width, height, and color. They inherit currentColor by default, so they adapt to the surrounding text color automatically.

import { Flex, Text, Button, TextField } from "@radix-ui/themes";
import { MagnifyingGlassIcon, PlusIcon } from "@radix-ui/react-icons";

export function Example() {
  return (
    <Flex direction="column" gap="3">
      <TextField.Root placeholder="Search...">
        <TextField.Slot>
          <MagnifyingGlassIcon height="16" width="16" />
        </TextField.Slot>
      </TextField.Root>
      <Button>
        <PlusIcon /> Add item
      </Button>
    </Flex>
  );
}

Browse all available icons on the Icons page, or visit the official Radix Icons documentation.