ask-sonner

Mount one `<Toaster />` in your root layout.tsx — it works inside server components — and call `toast()` from client code like event handlers. Never render a Toaster per page, 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 to a promise.

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 switch to `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 a provider like next-themes.

A `toast.promise` loading toast waits until its promise settles, so a promise that never resolves or rejects leaves it spinning. It can also be caused by `duration: Infinity` or `dismissible: false` on regular toasts.