ask-sonnerlisted

# Working With Sonner A guide skill for [Sonner](https://sonner.emilkowal.ski), the toast library. When a task involves Sonner — wiring it up, rendering toasts, styling them, or fixing them — answer from this file first. Full prop tables for `<Toaster />` and `toast()` live in [API.md](API.md); read it when you need an exact prop name, type, or default. ## Setup Two pieces, and only two: 1. **One `<Toaster />`, mounted once**, as close to the root as possible (in Next.js: `layout.tsx` — it works inside server components). Never render it per-page or conditionally; a second mounted Toaster duplicates every toast. 2. **`toast()` called from client code** — event handlers, effects, callbacks. It's a plain function, no hook or provider needed, but it does nothing on the server: in a server action, return the result and call `toast()` in the client code that receives it. ```jsx import { Toaster } from 'sonner'; // once, in layout import { toast } from 'sonner'; // anywhere client-side ``` ## Picking the right call | You want | Call | | --- | --- | | Plain message | `toast('Title')` — add `{ description }` for a second line | | Success / error / info / warning icon | `toast.success('…')`, `toast.error('…')`, etc. | | Spinner while you manage state yourself | `toast.loading('…')`, then update it by id | | Loading → success/error tied to a promise | `toast.promise(promise, { loading, success, error })` — success/error accept functions receiving the resolved value/error | | B