> Native Solid 2 fork. Original documentation and designs © WorkOS; historical posts retain their original context.

# 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](/primitives).

## Installation

Getting up and running is quick and easy.

### 1. Install Radix Themes

This fork is private and is not published on npm. Build and pack `packages/primitives` and `packages/themes`, copy both generated tarballs into your Solid 2 application, and install them from your command line. The native packages require `solid-js` and `@solidjs/web` version `2.0.0-rc.13`.

```bash
npm install ./radix-solid-primitives-0.0.0-local.tgz ./radix-solid-themes-0.0.0-local.tgz
```

### 2. Import the CSS file

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

```ts
import "@radix-solid/themes/styles.css";
```

### 3. Add the Theme component

Add `Theme` around your application. For a client-rendered app, mount into the root element in your HTML document:

```tsx
import { render } from "@solidjs/web";

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

import MyApp from "./your-app";



const root = document.getElementById("root");

if (!root) throw new Error('Add <div id="root"></div> to your HTML document.');

render(() => <Theme><MyApp /></Theme>, root);
```

### 4. Start building

You are now ready to use Radix Themes components.

```jsx
// your-app.tsx

import { Flex, Text, Button } from "@radix-solid/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](/themes/docs/components/theme) component.

### Basic configuration

Pass [configuration](/themes/docs/components/theme) to the `Theme` to customize appearance.

```jsx
import MyApp from "./your-app";

<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](/themes/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-solid/themes";

import MyApp from "./your-app";

export default function () {

  return <Theme>

			<MyApp />

			<ThemePanel />

		</Theme>;

}
```

### Take it further

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

# [Styling](/themes/docs/overview/styling)

[Learn how to approach styling and overrides with Radix Themes.](/themes/docs/overview/styling)

# [Layout](/themes/docs/overview/layout)

[Get to know the layout primitives and their available properties.](/themes/docs/overview/layout)

# [Theme overview](/themes/docs/theme/overview)

[Anatomy of a theme and how to create the perfect style for your app.](/themes/docs/theme/overview)

# [Color](/themes/docs/theme/color)

[Understand the color system and its application in your theme.](/themes/docs/theme/color)

# [Dark mode](/themes/docs/theme/dark-mode)

[Integrate a great looking dark mode into your app using appearances.](/themes/docs/theme/dark-mode)

# [Typography](/themes/docs/theme/typography)

[Add custom typefaces and fine tune typographic details.](/themes/docs/theme/typography)