🎥 New on Build UI: Radix Toast
​ Hey! We've been working on some demos for our newest course, and we wanted to share this slick Animated Toast component we just finished: It's built with Radix, Tailwind CSS, and Framer Motion. Three different libraries, each tackling one concern – behavior, styling, and animation – but all composing together for one seamless developer experience. This is why we love Radix. Sure, there are libraries that give you a single <Toast> you can drop into your app. But as soon as you want to change the color, you'll have to open the docs. And that goes something like this: Ah, there's a theme prop. Good for now. ​ Hm... I actually want the messages to be on the bottom of the screen. ​ Ok, back to the docs. Looks like there's a position prop I can set to "bottom-left". Cool. ​ But I was kinda hoping the messages would be animated. It looks like they are, sorta? ​ I really want new messages to push old messages down, just like on iOS. Do the docs say anything about that? Looks like they don't. ...ever felt like this before? These batteries-included UI libraries are easy to get started with, but if you're anything like us, you always run into their limitations. It's frustrating to give so much attention to every detail of your app, only to get stuck with a generic <Toast> component just because you don't want to recreate it from scratch. And this is exactly the problem Radix was designed to solve. Radix is unstyled, which means it only ships the behavior needed for UI components like toasts, but leaves out any styling code that affects their look and feel. What sort of behavior are we talking about? Check out what's included in <Radix.Toast>:
...just to name a few. Outside of this, Radix leaves everything up to us. We like using Tailwind for styling and Framer Motion for animation – so much so we that we made two courses about them. So, our demo uses Tailwind utilities like "fixed top-0 right-0" to position the container and "flex-col-reverse gap-3" to lay out the messages. And we use Framer Motion's <motion​.li layout> component to smoothly animate each message in the list. We love using these tools to build the rest of our apps. And our UI components should be no different. If this gets you excited, check out the code for our Toast recipe, watch this YouTube video from Sam, and stay tuned for more Radix demos. |
Happy hacking, – Sam and Ryan |
Build UI
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...
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....