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.
Preview of Sonner.
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 sound 2. to ring Sonner 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.
... continue reading