ask-sonner

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

Use `toast.promise(promise, { loading, success, error })` when the flow is tied to a promise, or manage it manually: capture `const id = toast.loading('Uploading…')` and later call `toast.success('Uploaded', { id })` to update the same toast in place.

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 at the root 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`) via the `classNames` option, or switch to `unstyled: true` or headless `toast.custom()` for full control over the markup.

No — the `theme` prop defaults to `'light'` and does not track the OS. Set `theme="system"` or wire your theme provider by passing the resolved theme from next-themes, e.g. `<Toaster theme={resolvedTheme} />`.

An ancestor element creates a stacking context via transform, filter, or overflow, or the overlay out-z-indexes the toaster. Move `<Toaster />` to the document root, outside any dialog or portal container, so it stacks above the modal.