🎥 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
Subscribe to stay updated on all the latest content from Build UI.
Hey there!We've been experimenting with some new AI components, and we thought you'd have fun seeing what we've been up to! This week, we've got two new videos showing off some of the React techniques we're using to handle streaming text from large language models—plus a code recipe for animating that text to make it look buttery smooth. Animate streaming text with a one-line hook Watch now → Distinguishing between human and programmatic scrolling Watch now → Recipe: useAnimatedText View now...
Hey! It's been a while since we've sent an update, but it was great meeting so many of you during conference season this spring. We're excited to be gearing up for our next course! More on that below... but first, here's what we've been up to: How to build a Recursive React Component Watch now → React Unpacked: A Roadmap to React 19 Watch now → SPAs in React 19 Watch now → Throw is about control flow – not error handling Watch now → We're super excited to share that we've started work on our...
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:...