ask-sonner

Mount a single `<Toaster />` in your root layout.tsx — it works inside server components — and call `toast()` from client code like event handlers. 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: store the id from `toast.loading('Uploading…')` and later call `toast.success('Uploaded', { id })` to update the same toast.

Duplicate toasts 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 the second call updates instead.

Sonner's injected default styles win the cascade over utility classes. Mark classes `!important` (e.g. `!text-red-900`), or use `unstyled: true` or headless `toast.custom()` with your own JSX for full control.

No. The `theme` prop defaults to `'light'` and does not track the OS. Pass `theme="system"` on the Toaster, or wire your theme provider, for example `<Toaster theme={resolvedTheme} />` from next-themes.

A `toast.promise` toast waits until its promise settles, so a promise that never resolves or rejects leaves the loading state permanently. Also check for `duration: Infinity` or `dismissible: false` on manually created toasts.