What is Radix Themes?

Check out the latest project from the team behind Radix UI!

This video was made in collaboration with the Radix team.

[zscoder]

We need more Radix UI tutorials on YT, thanks for sharing

[HenryBabbage]

the influence of shadcn-ui back on Radix seems undeniable

[pyrocentury]

Honestly not a fan. The import size for radix-themes are massive and size of the css file balloons since it automatically loads all the tailwind utility classes instead of just the ones you need and use. The modularity of the primitives and only importing what you need was a huge plus.

[gradientO]

Discovering your channel is one of the best things I've done this year. The way you explain stuff is awesome ❤
Btw how to choose between Radix Colors and Tailwind colors (I'm using radix primitives not the one in this video)

[edgarasben]

Thanks for explaining it simply! :) I saw it, but instantly though: what are the limitations and how well does it play with Tailwind?

[JanacMeena]

🎯 Key Takeaways for quick navigation:

00:01 🧩 *Radix Themes Overview*
- Introduction to Radix Themes as a set of UI components for React.
- Highlights the ease of customizing these components to match an application's brand or style.
00:27 🎨 *Customizing Theme Colors*
- Demonstrates changing the accent color of the application.
- Shows the impact of color change on various UI elements like buttons, tables, and placeholders.
01:09 🌗 *Switching to Dark Mode and Adjusting Radius*
- Transitioning the app's appearance to dark mode with new color shades.
- Adjusting the radius property to alter the UI's corner styles.
01:47 🧱 *Unified Theme Component*
- Explains how each component in Radix Themes derives its style from a single theme component.
- Emphasizes compatibility and beauty of components under any chosen theme.
02:17 🖌️ *Component Showcase and Design Details*
- Showcases a variety of components and their responsiveness to the theme.
- Highlights specific design details like border radius variations and padding adjustments.

Made with HARPA AI

[hakuna_matata_hakuna]

How is Daisy ui so ahead in having nice handpicked themes, with anneasy way to quickly modify an existing one father than start from scratch

[raymondmichael]

That’s my next TASK figured out for me, applying this to my app

[edhahaz]

How does it compare to headless UIs you've been using until now like Aria?

[murwn]

What about custom components? And does it use css-in-js?

[airixxxx]

I'm using Radix primitives with Tailwind, do you recommend using Radix Themes with Tailwind? Since Tailwind has its default colors and variables in its config it may clash with this theme provider and Javascript oriented props.

[yunyang]

Could you make a video about background theme? For example, Discord premium theme looks really cool, could you show us how to make background look like that

[kmylodarkstar]

how to work with design tokens to convert into themes? is there anybody working into this or they are just different approaches

[nthonymiller]

How does Radix themes differ from Shadcn-ui ?

[ayoubdahmen]

m i the only one that can't get the dark appeareance when i type it ?
PS : iam using React not NextJS

[OnlyJavascript]

is it possible to use tailwind classes? how about making this responsive?

[shafu_xyz]

radix ui seems to miss combobox component which is very crucial in most projects, how would go about that? yea we can use another lib for that, but then does this theming break for that component?

[raymondmichael]

Hi, can we use this with shadcn/ui too?

[isaacvargas]

As others have asked, I am also curious how Radix Theme plays with Tailwind. Can you override parts of the component by using Tailwind? So far it seems that Radix UI primitives are the way to go if you wish to customize individual components. Thank you so much for the videos. Really clear and well produced!

[iamfaizanarif]

Wondering how well it works with shadcn ui?