Getting started

<Description>Install Radix Themes and start building in minutes.</Description>

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.

<Tabs.Root asChild defaultValue="npm"> <CodeBlock.Root my="5"> <CodeBlock.Header> <Tabs.List> <Tabs.Trigger value="npm">npm</Tabs.Trigger> <Tabs.Trigger value="yarn">yarn</Tabs.Trigger> <Tabs.Trigger value="pnpm">pnpm</Tabs.Trigger> </Tabs.List> </CodeBlock.Header>

<Tabs.Content asChild value="npm">
  <CodeBlock.Content>
    <CodeBlock.Pre>
      <CodeBlock.Code language="bash">
        {'npm install @radix-ui/themes'}
      </CodeBlock.Code>
    </CodeBlock.Pre>
    <CodeBlock.CopyButton />
  </CodeBlock.Content>
</Tabs.Content>

<Tabs.Content asChild value="yarn">
  <CodeBlock.Content>
    <CodeBlock.Pre>
      <CodeBlock.Code language="bash">
        {'yarn add @radix-ui/themes'}
      </CodeBlock.Code>
    </CodeBlock.Pre>
    <CodeBlock.CopyButton />
  </CodeBlock.Content>
</Tabs.Content>

<Tabs.Content asChild value="pnpm">
  <CodeBlock.Content>
    <CodeBlock.Pre>
      <CodeBlock.Code language="bash">
        {'pnpm add @radix-ui/themes'}
      </CodeBlock.Code>
    </CodeBlock.Pre>
    <CodeBlock.CopyButton />
  </CodeBlock.Content>
</Tabs.Content>

</CodeBlock.Root> </Tabs.Root>

2. Import the CSS file

Import the global CSS file at the root of your application.

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

3. Add the Theme component

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

jsx

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

export default function () {
	return (
		<html>
			<body>
				<Theme>
					<MyApp />
				</Theme>
			</body>
		</html>
	);
}

4. Start building

You are now ready to use Radix Themes components.

jsx

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

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

Customizing your theme

Configuration is managed and applied via the Theme component.

Basic configuration

Pass configuration to the Theme to customize appearance.

jsx

<Theme accentColor="crimson" grayColor="sand" radius="large" scaling="95%">
	<MyApp />
</Theme>

Using the theme panel

ThemePanel is a drop-in component that allows you to preview the theme in real time. Visit the component playground to see it in action.

To add ThemePanel to your app, import it from the package and drop it inside your root Theme.

jsx

import { Theme, ThemePanel } from "@radix-ui/themes";

export default function () {
	return (
		<Theme>
			<MyApp />
			<ThemePanel />
		</Theme>
	);
}

Take it further

Get the most out of Radix Themes by exploring more concepts and features.

{

  <ThemesLinkCard
    title="Layout"
    desc="Get to know the layout primitives and their available properties."
    href="/themes/docs/overview/layout"
  />

  <ThemesLinkCard
    title="Theme overview"
    desc="Anatomy of a theme and how to create the perfect style for your app."
    href="/themes/docs/theme/overview"
  />

  <ThemesLinkCard
    title="Color"
    desc="Understand the color system and its application in your theme."
    href="/themes/docs/theme/color"
  />

   <ThemesLinkCard
    title="Dark mode"
    desc="Integrate a great looking dark mode into your app using appearances."
    href="/themes/docs/theme/dark-mode"
  />

  <ThemesLinkCard
    title="Typography"
    desc="Add custom typefaces and fine tune typographic details."
    href="/themes/docs/theme/typography"
  />

</Grid>

}