Guides setup, usage, styling, and troubleshooting of Sonner toast notifications in React.
npx skills add https://github.com/Seyamalam/pstu_final --skill ask-sonner-seyamalam
Please help me install this Agent Skill. Skill: ask-sonner Source: https://github.com/Seyamalam/pstu_final/tree/main/.agents/skills/ask-sonner Command: npx skills add https://github.com/Seyamalam/pstu_final --skill ask-sonner-seyamalam
<Toaster /> at the root and pick the right API — typed toasts, toast.promise, toast.loading, action buttons, or headless toast.custom. - Styling and theming: A four-rung escalation ladder from defaults and richColors through inline styles and !important classNames to fully headless custom JSX, plus icon swapping and dark-mode theming. - Troubleshooting table: Symptom-to-fix mappings for duplicate toasts, lost styles, stacking-context issues, stuck promise toasts, swipe directions, and multi-toaster targeting. - Use Case: A developer's success toast renders gray instead of green and appears twice; the Skill identifies the missing richColors prop and the duplicate Toaster mounted in both layout and page. ## Quick Start Ask how to fix a Sonner toast that is not appearing or how to show a loading toast that turns into a success message when a promise resolves.High-intent search queries and answers about installing and using this skill.
Mount a single `<Toaster />` from the sonner package in your root layout.tsx, which works inside server components. Then call `toast()` from any client-side event handler or callback; no provider or hook is needed.
Use `toast.promise(promise, { loading, success, error })` to tie the toast lifecycle to a promise. Alternatively, call `toast.loading('Uploading…')`, keep the returned id, and later call `toast.success('Done', { id })` to update it in place.
Duplicate toasts usually mean two `<Toaster />` components are mounted, such as in both layout and page. It can also happen when `toast()` fires inside an effect under React StrictMode's double-invoke; fire from event handlers or pass a stable id instead.
Sonner's injected default styles win the CSS cascade over utility classes. Mark classes as important (for example `!text-red-900`), or switch to `unstyled` mode or a fully headless `toast.custom()` with your own JSX.
No. The `theme` prop defaults to `'light'` and does not track the OS. Pass `theme="system"` on the Toaster, or wire it to your theme provider, such as passing `resolvedTheme` from next-themes.
An ancestor element creating a stacking context (via transform, filter, or overflow) or a higher z-index overlay can clip the toaster. Move `<Toaster />` to the document root, outside any dialog or portal container.
darraghh1Generate Next.js forms with react-hook-form, shadcn/ui, and Zod validation.
dembrandtDesign accessible notification, error, loading, and recovery feedback patterns.
jacksonlee-twGenerates Playwright E2E tests, Page Objects, and fixtures from Use Case documents and Vue pages.
Jicate-SolutionsMigrate custom toast hooks to react-hot-toast library methods.