​ 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:
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 |
by Sam Selikoff
Subscribe to stay updated on all the latest content from Build UI.
Learn all about Search Params with React Server Components in our latest blog post, and check out our most recent podcast episode for our thoughts on React 19's upcoming features. Instant Search Params with React Server Components Read now → Out-of-order streaming in React Watch now → Asset loading in React Watch now → Podcast - Blog Post Club: React Labs – What We’ve Been Working On Watch now → Podcast - Instant URL search params in Next.js Watch now → Podcast - React Deep Dive:...
Dive into free videos on Radix, Remix, and Server Components, and catch our latest podcast episode where we talk through React's new cache function. Building an Elastic Slider with Framer Motion and Radix Watch now → Why you can't set cookies in Server Components Watch now → React's new cache function Watch now → Optimistic UI in Remix Watch now → Podcast - React Cache Deep Dive Watch now → Podcast - Advanced Radix UI and Blog Post Club React Server Watch now → And in case you missed it, last...
I'm wrapping up our Radix course and came across a neat use case for Tailwind's new `has` modifier. If you haven't used it yet, `has` lets you style parent elements based on the state of their children: Here we're giving the root div a green border if it has any children in the :checked pseudostate. Pretty neat! So this came up when I was working on the focus state for my Radix <Slider> demo. Typically sliders render a <Thumb> control, which is perfect for showing focus: But this demo doesn't...