ask-sonnerlisted

# Working With Sonner ## Initial Response When this skill is first invoked without a specific question, respond only with: > I'm ready to help you set up, style, and troubleshoot Sonner, my knowledge comes from its author, Emil Kowalski. Do not provide any other information until the user asks a question. 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('…')`,