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)
🎯 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
Great analysis, thank you! I need some advice: My OKX wallet holds some USDT, and I have the seed phrase. (alarm fetch churn bridge exercise tape speak race clerk couch crater letter). How can I transfer them to Binance?
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.
@@combatninjaturtle Literally just looking into it now. I'll have to look into the specifics of how it works and how they decide which CSS classes to include vs remove.
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
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.
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!
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?
@@marvinkr Shadcn/ui doesnt do a true combo box either. It does a select/dropdown with a search inside. The short answer is that @shafu_xyz, yes you'll need to use another component & radix theme is exposed as CSS Custom properties so any styling you need to handle manually you can use your theme's value.
@@OnlyJavascript What do you mean with specificity? The part about only importing the components you need or something like css selector specificity etc I'm considering both radix themes and shadcn so any input is greatly appreciated
Good custom UI's will always need designers, but sometimes a project needs a UI built quickly that doesn't look like crap. This is definitely a step better than everyone just using MaterialUI or Bootstrap.
the influence of shadcn-ui back on Radix seems undeniable
We need more Radix UI tutorials on YT, thanks for sharing
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)
Thanks for explaining it simply! :) I saw it, but instantly though: what are the limitations and how well does it play with Tailwind?
Time to binge Radix UI vids!
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
That’s my next TASK figured out for me, applying this to my app
🎯 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
Great analysis, thank you! I need some advice: My OKX wallet holds some USDT, and I have the seed phrase. (alarm fetch churn bridge exercise tape speak race clerk couch crater letter). How can I transfer them to Binance?
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.
It doesn’t matter really because tree shaking is done in the build.
@@combatninjaturtle Does tree-shaking work with CSS?
@@KylanHurt yes, why not?
@@combatninjaturtle Literally just looking into it now. I'll have to look into the specifics of how it works and how they decide which CSS classes to include vs remove.
How does it compare to headless UIs you've been using until now like Aria?
Looks pretty cool
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
damn that table does wable
What about custom components? And does it use css-in-js?
what about Nextui?
how to work with design tokens to convert into themes? is there anybody working into this or they are just different approaches
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.
is it possible to use tailwind classes? how about making this responsive?
Way so cool 😍🤩😘
Hi, can we use this with shadcn/ui too?
How does Radix themes differ from Shadcn-ui ?
Shadcn UI and Radix Themes are built on top of Radix Primitives. These UI libraries have the same purpose.
m i the only one that can't get the dark appeareance when i type it ?
PS : iam using React not NextJS
Is there Radix Themes for Vue?
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!
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?
just add some shadcn/ui components on top of it
@@marvinkr Shadcn/ui doesnt do a true combo box either. It does a select/dropdown with a search inside. The short answer is that @shafu_xyz, yes you'll need to use another component & radix theme is exposed as CSS Custom properties so any styling you need to handle manually you can use your theme's value.
wow
Wondering how well it works with shadcn ui?
this replaces it.
@@smotch7533 it doesn't replace it. shadcn ui is built on top of this UI library meaning it uses this library underneath to do what it does
@@speedster784 explain why you would use shadcn over this.
@@speedster784 Shadcn UI and Radix Themes are built on top of Radix Primitives. These UI libraries have the same purpose.
specificity is the biggest issue .
getting back to shadcn until this gets fixed.
@@OnlyJavascript What do you mean with specificity? The part about only importing the components you need or something like css selector specificity etc
I'm considering both radix themes and shadcn so any input is greatly appreciated
Honestly tailwind makes everything obsolete. 😊
But Tailwind doesn't even take functionality into account, does it?
This to me seems to take away any creativity from ui building or is that ignorant?
Good custom UI's will always need designers, but sometimes a project needs a UI built quickly that doesn't look like crap. This is definitely a step better than everyone just using MaterialUI or Bootstrap.