ask-sonner

Mount one `<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.

Call `toast.loading('Uploading…')` and keep the returned id, then call `toast.success('Uploaded', { id })` to update it. Alternatively, use `toast.promise(promise, { loading, success, error })` to tie the transition directly to a promise.

Sonner's injected default styles win the cascade over utility classes. Mark classes with `!important` (e.g. `!text-red-900`) via the `classNames` option, or go headless with `toast.custom()` for full styling control.

Duplicate toasts usually mean two Toasters are mounted, such as one in the layout and one in a page — keep only one. It can also come from firing `toast()` in an effect under React StrictMode's dev double-invoke; fire from the event handler or pass a stable id.

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 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, so it stacks above the modal.