Building a Toast Component

Summary

Back in 2023, I decided to build a toast library called Sonner. It’s now downloaded over 7,000,000 times per week from npm and used by companies like Cursor, X, and Vercel. It’s also the default toast component in shadcn/ui. When I was making it, the toast “market” was already crowded. So what made Sonner stand out? Why did people choose it over proven alternatives? Let’s start with the name. Naming My thinking was that naming things based on their function feels cheap. react-toast, react-snackbar, react-notifications, they all feel boring and generic to me. I wanted something more unique and elegant. The way I came up with Sonner is I looked up French words related to notifications. Sonner, which means “to ring” was one of them. sonner/sɔ.ne/ Verb [intransitive]Inherited from Old French soner, suner, from Latin sonāre.1. to sound2. to ringSonner la cloche (Ring the bell).Sonner a la porte (Give a ring). While I’m sacrificing discoverability and clarity, it feels elegant to me. It’s also a name that feels different, which is important if I want it to stand out. Animations I believe Sonner took off immediately because of the stacking animation which was done by some companies before, but never open sourced. This is what made people fall in love with this tiny component, it just felt right when you saw it animate. Here’s Theo’s reaction to it for example: Theo’s reaction to Sonner’s animations. Theo’s reaction to Sonner’s animations. I knew I had to highlight this motion when introducing the library so I experimented with a few different announcement videos where the focus was on that stacking animation. Here’s what I ended up with back in 2023: You can view the tweet here. You can view the tweet here. When it comes to the code, I initially used CSS keyframes for the animations, but they aren’t interruptible. Try quickly adding a few toasts below. As you add more toasts, the older ones jump into their new position instead of smoothly transitioning. Notice how toasts j...