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
npm
yarn
pnpm
bun
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.