ask-sonner

Mount a single `<Toaster />` in your root layout.tsx — it works inside server components — and call `toast()` from client-side event handlers or effects. Never render the Toaster per-page or conditionally, since a second mounted Toaster duplicates every toast.

Use `toast.promise(promise, { loading, success, error })` to tie the toast lifecycle to a promise, or manage it manually: capture the id from `toast.loading('Uploading…')` and later call `toast.success('Uploaded', { id })` to update the same toast.

Missing toasts usually mean no `<Toaster />` is mounted, or it unmounted due to conditional or per-page rendering. Also, `toast()` is client-only — in a server action, return the result and call `toast()` from the client code that receives it.

Sonner's injected default styles win the cascade over ordinary classes. Mark classes `!important` (e.g., `!text-red-900`) via `toastOptions.classNames`, or switch to `unstyled` or headless `toast.custom()` for full control.

No — the `theme` prop defaults to `'light'` and does not track the OS. Set `theme="system"` on the Toaster, or pass the resolved theme from a provider like next-themes: `<Toaster theme={resolvedTheme} />`.

Duplicates come from two mounted Toasters (layout and page) or from calling `toast()` inside an effect under React StrictMode's dev double-invoke. Keep one Toaster and fire toasts from event handlers, or pass a stable id so repeat calls update instead.