ask-sonner

Mount a single `<Toaster />` as close to the root as possible — in Next.js, place it in layout.tsx since it works inside server components. Then call `toast()` from any client-side event handler or callback; no hook or provider is needed.

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

Duplicate toasts usually come from two mounted Toasters (layout and page) or from calling `toast()` inside an effect under React StrictMode's 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 CSS cascade over utility classes. Mark classes as `!important` (e.g., `!text-red-900`) via the classNames option, or use `unstyled: true` 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 with `<Toaster theme={resolvedTheme} />`.

An ancestor element creates a stacking context via transform, filter, or overflow, or the overlay has a higher z-index than the toaster. Move `<Toaster />` to the document root, outside any dialog or portal container.