​

Hey there!

I've got some exciting news to share today:

​Advanced Radix UI – my newest course – is now live!

Clocking in at 2 hours and 13 minutes across 35 chapters, you’ll learn how to use Radix to build four completely custom UI components: a Switch, a Selector Group, a Toast, and a Slider:

Each component has a completely custom design using Tailwind, and there's also some slick animation and interactions we build with React and Framer Motion to enhance what Radix gives you out of the box.

We've split up the lessons into chapters to give you a step-by-step breakdown of each component:

I've been using Radix for more than two years, and I've even collaborated with the Radix core team to showcase the library's power over on YouTube. By working through this course, you'll get a front-row seat to my approach for styling, animating, and composing Radix's primitives using my favorite libraries like Tailwind and Framer Motion.

And by the end of the course, you'll be equipped to use Radix to build your own custom components with unique designs and interactions.

Here's just some of the things you'll learn how to do:

• Render your first unstyled component from Radix
• Use Tailwind's data-* modifiers to target Radix's internal state
• Add Radix to existing code without disrupting its design
• Use controlled components to update external React state
• Use uncontrolled components to get data from Radix into an HTML form
• Animate Radix's primitives using Framer Motion
• Use Tailwind's group-* and :has-* modifiers to target arbitrary parts of your JSX tree
• Use focus-visible even when Radix programmatically focuses an element
• Add dynamic UI on top of Radix using React and the browser's NumberFormat API
• Use state and events to layer custom interactions on top of Radix's default behavior

I'm absolutely thrilled to share the complete course you and I can't wait to hear what you think!

Head over to Build UI to start watching the course today:​

Happy hacking,

– Sam and Ryan