December 7, 2025
Butter or burn?
Building a Toast Component
6M weekly downloads, yet the internet is roasting this “toast”
TLDR: Sonner’s pop-up notifications are wildly popular, but commenters blasted toasts as inaccessible, easy to miss, and poorly named; some point to GitHub dropping toasts entirely. The debate: cool animations vs. clear, inclusive feedback that users actually notice—an issue that matters for anyone building user-friendly apps.
A tiny pop-up message tool called Sonner is everywhere—6 million downloads a week, used by X (formerly Twitter), Vercel, and it’s the default in shadcn/ui. The creator says the magic is in the elegant French name (“to ring”) and a hypnotic stacking animation. But the community? Oh, they came to toast the toast. One camp brought torches for accessibility: a commenter points out GitHub is literally removing toasts from its design system, saying they’re almost impossible to make accessible and are misused anyway. Others say toasts are where information goes to die—blink and you miss it—and prefer feedback that appears right where you clicked, like a button confirming success. There’s even shade about the name: cool vibe, sure, but not helpful if you don’t know what it does. The mobile site getting “really choppy” is the cherry on top of the rage sundae. Meanwhile, fans still love the buttery-smooth motion and swipe-to-dismiss, but critics counter: flashy isn’t the same as useful, and a ringing bell no one hears isn’t a win. The memes write themselves—burnt toast, jammed UX, and the eternal “is this accessible?” clapback—making this a deliciously messy design drama.
Key Points
- •Sonner, a toast library launched in 2023, now sees over 6 million weekly downloads on npm and is used by companies like Cursor, X, and Vercel.
- •The library’s distinct name, derived from the French word “sonner,” was chosen for elegance over discoverability.
- •Sonner’s standout feature is an open-sourced stacking animation that was emphasized in launch materials.
- •The implementation moved from CSS keyframes to CSS transitions to enable interruptible, smooth animations via React useEffect and data attributes.
- •Stacking uses absolute positioning, index-based translation and scaling, height normalization for uneven toasts, and a momentum-based swipe-to-dismiss gesture.