Working With Sonner

A guide skill for Sonner, the toast library. Inspect the installed version and current integration before changing code. Full prop tables for <Toaster /> and toast() live in API.md; use them only when an exact prop name, type, or default is needed, and verify version-sensitive behavior against the installed package.

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.

import { Toaster } from 'sonner'; // once, in layout
import { toast } from 'sonner';   // anywhere client-side

Picking the right call