Getting started

Install Radix Themes and start building in minutes.

Radix Themes is a pre-styled component library that is designed to work out of the box with minimal configuration. If you are looking for the unstyled components, go to Radix Primitives.

Installation

Getting up and running is quick and easy.

1. Install Radix Themes

Install the package from your command line.

npm install @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';

For NX added to build.options

{
    "styles": [
        "@radix-ui/themes/styles.css"
    ],
    "stylePreprocessorOptions": {
        "includePaths": [
            "node_modules/"
        ]
    }
}

3. Add the Theme component

Add Theme (RdxThemeDirective) to your application, wrapping the root component inside of body.

import { Component } from '@angular/core';
import { bootstrapApplication } from '@angular/platform-browser';
import 'zone.js';
import { RdxThemeDirective } from '@radix-ng/components/theme';


@Component({
  selector: 'app-root',
  standalone: true,
  imports: [RdxThemeDirective],
  template: `
    <div rdxTheme data-accent-color="indigo"
                  data-radius="medium"
                  data-scaling="100%">
        <h1>Hello from {{ name }}!</h1>
        <a target="_blank" href="https://angular.dev/overview">Learn more about Angular</a>
    </div>
  `
})
export class App {
  name = 'Angular';
}


bootstrapApplication(App);

Customizing your theme

Configuration is managed and applied via the Theme component.