Working With Sonner
A guide skill for
Sonner
, 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
and
toast()
live in
API.md
; read it when you need an exact prop name, type, or default.
Setup
Two pieces, and only two:
One
, 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.
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
Show more
Installs
721
Repository
emilkowalski/skills
GitHub Stars
28.0K
First Seen
Today
Security Audits
Gen Agent Trust Hub
Pass
Socket
Pass
Snyk
Pass