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

Getting started

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

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.

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.

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:

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.

// 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 component.

Basic configuration

Pass configuration to the Theme to customize appearance.

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 to see it in action.

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

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.