Guides setup, usage, styling, and troubleshooting of the Sonner React toast library.
npx skills add https://github.com/emilkowalski/skills --skill ask-sonner
Please help me install this Agent Skill. Skill: ask-sonner Source: https://github.com/emilkowalski/skills/tree/main/skills/ask-sonner Command: npx skills add https://github.com/emilkowalski/skills --skill ask-sonner
Working with the Sonner toast library involves many small decisions and pitfalls: where to mount the Toaster, which toast() call to use, why toasts duplicate, lose styles, or ignore dark mode. This Skill provides authoritative answers and exact API references so you wire up and debug Sonner correctly the first time.
<Toaster /> at the root and pick the right call — plain, typed, loading, promise, action buttons, or fully headless toast.custom().richColors through classNames with !important to headless custom JSX, plus icon swapping and dark-mode theming via theme="system" or next-themes.toast.promise loading states.Ask how to set up Sonner in a Next.js app and show a success toast after a form submission.
High-intent search queries and answers about installing and using this skill.
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 })` to tie the toast lifecycle to a promise, or manage it manually: store the id from `toast.loading('Uploading…')` and later call `toast.success('Uploaded', { id })` to update the same toast.
Duplicate toasts usually mean two Toasters are mounted, such as one in the layout and one in a page — keep exactly one. It can also come from calling `toast()` inside an effect under React StrictMode's dev double-invoke; fire from the event handler or pass a stable id instead.
Sonner's injected default styles win the cascade over your classes. Mark classes as `!important` (e.g. `!text-red-900`), or use `unstyled` or the headless `toast.custom()` approach for full control over the toast markup and styling.
No — the `theme` prop defaults to `'light'` and does not track the OS. Set `theme="system"` on the Toaster, or wire your theme provider by passing the resolved theme from next-themes, e.g. `<Toaster theme={resolvedTheme} />`.
A `toast.promise` toast stays in the loading state when its promise never settles — the first argument must be a promise (or a function returning one) that actually resolves or rejects. Also check for `duration: Infinity` or `dismissible: false` on manually managed toasts.
Chris-MaskeyDiagnose React use client directive placement and client boundary misconfigurations in Next.js.
techdiary-devScaffold React Hook Form components with Zod validation and server mutations.
Objective-ArtsDefine motion design rules for digital interfaces using physical metaphors and choreography.
landim32Display user-facing alerts with sonner toast notifications in React projects.