Sonner toasts
A practical guide to Sonner, the React toast library, from wiring up the Toaster to promise toasts, styling, theming and the usual reasons toasts misbehave.
When to use it
- You are adding toast notifications to a React app with Sonner.
- Toasts don’t appear, appear twice or sit behind a modal.
- Toasts ignore your Tailwind classes or don’t follow dark mode.
A practical example
You ask
“Show a loading toast while the file uploads, then switch it to success or error.”
Your agent does
It sets up a promise toast that updates in place and checks the Toaster is mounted once with the right theme.
What gets installed
The whole folder is copied, so scripts, references and any license notices stay together.
- API.md4,545 bytes
- SKILL.md7,236 bytes
Credit and license
Rewritten for this catalog from an earlier merged UI skill. No upstream author is recorded for it.