🎉 Announcing Radix Themes—a beautiful, open source component library that’s built on top of the primitives so many developers love.

Get Radix Themes here:

That’s 45 components, 100’s of variants, a handful of simple, yet powerful primitives for layout, and an extensive token system provided via CSS variables. We can’t wait to see what you will build with it.

As usual, we obsessed over the developer experience. It’s super easy to get started—just import the stylesheet, wrap your app in Theme provider, and go! No config is required.

Of course, you can customize your theme. Let’s start with colors. There’s more than 20 hues to choose from. We even allow you to pair your accent color with a tinted gray.

In fact, we just shipped a huge update to our color system, which powers Radix Themes: You automatically get beautiful light and dark mode palettes, a transparent version of any color, and accessible contrast ratios out of the box.

If you want to use your own brand colors, you can pop the hood and update the corresponding CSS variables in your app:

Here’s a cool detail for design nerds—components that sit on a panel, like Card or Table, are a little translucent, which lets some of the background through. Of course, you can turn it off if you are after a different look and feel.

You can also customize the border radius and scaling of your components. We built a playground with all components and theme options on a single page:

What about fonts? Out of the box, you get system fonts with no external dependencies. We value good typography, so there is a number of typographic components to choose from. Your main ones are Text, Heading, and Code. Each comes with a type scale and a set of weights.

Of course, we haven’t forgotten about the design details on some of the lesser typographic elements. Here’s a Kbd, representing a computer key or a shortcut, and Em, set in an italic font.

You can also use Radix Themes with your own fonts. Like with colors, there’s an extensive system of CSS variables that make it easy to swap the font, tweak the type scale, or even font metrics for a specific component:

Let’s talk about styles. 1️⃣ Is Radix Themes a styling solution? – No. 2️⃣ Are you expected to write styles? – Sometimes, more if you feel adventurous. 3️⃣ I want to use Radix Themes with my favourite CSS tech. Will it work? – Yes!

Here’re the tools that Radix Themes provides: ➡️ Ready-made components with sensible APIs and dozens of variations ➡️ Layout primitives to keep the layout responsibilities contained ➡️ Design tokens to build your own custom components with a similar look and feel