Sonner
Beautiful toast notifications. One import, done.
In plain English
Like the little 'ding' sound when your food is ready at a restaurant. It's a quick, polite notification that something happened — your order went through, your file was saved, something went wrong.
Real-world example
A user fills out a contact form on your website and hits submit. Instead of the page just sitting there, a small popup slides in from the bottom: 'Message sent!' — then disappears. That's Sonner.
Where this fits in your project
This is a small but essential UI utility. Add it once, use it everywhere in your app.
When to use this
When you need to show toast notifications — 'Saved!', 'Error!', 'Copied to clipboard'. One import, one line of code.
The situation
Your app does things (saves data, sends emails, copies text) and you need to confirm actions to the user.
Good for
- + Any web app with user actions
- + Form submissions
- + API responses
Not ideal for
- - Static sites with no interactivity
Getting started
Install with `npm install sonner`, add `<Toaster />` to your layout, call `toast('Hello!')` anywhere.