ask-sonner

Mount a single `<Toaster />` in your root layout.tsx, which 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 })` to tie the toast lifecycle to a promise, or manage it manually by calling `toast.loading('Uploading…')` and then `toast.success('Uploaded', { id })` with the same id to update it.

Duplicate toasts usually come from two mounted Toasters, such as one in the layout and one in a page, so keep only one. They can also come from `toast()` firing in an effect under StrictMode double-invoke; fire from event handlers or pass a stable id instead.

Sonner's injected default styles win the cascade over your classes. Mark classes with `!important` (for example `!text-red-900`), or use `unstyled` 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"` on the Toaster, or pass the resolved theme from next-themes via `<Toaster theme={resolvedTheme} />`.

An ancestor element creates a stacking context through transform, filter, or overflow, or the overlay out-z-indexes the toaster. Move `<Toaster />` to the document root, outside any dialog or portal container, to fix the layering.