Guides setup, styling, and troubleshooting of Sonner toast notifications in React applications.
npx skills add https://github.com/beelabstudio/ai --skill ask-sonner-beelabstudio
Please help me install this Agent Skill. Skill: ask-sonner Source: https://github.com/beelabstudio/ai/tree/main/skills/enabling/ask-sonner Command: npx skills add https://github.com/beelabstudio/ai --skill ask-sonner-beelabstudio
<Toaster /> at the root and pick the right toast() variant — typed toasts, toast.promise, toast.loading, action buttons, or headless toast.custom. - Styling escalation ladder: Progress from richColors and inline styles through classNames with !important to fully headless custom JSX, plus icon and theme configuration. - Troubleshooting table: Diagnose duplicate toasts, lost styles in Astro or Shadow DOM, stacking-context issues, stuck toast.promise calls, and dark-mode mismatches. - Use Case: A developer's success toast renders gray instead of green and appears twice on form submit; the Skill identifies the missing richColors prop and the double-mounted Toaster causing both issues. ## Quick Start Ask how to set up Sonner in a Next.js app or why your toast is not appearing, and get an answer grounded in the library author's own guidance.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 effect; no provider or hook is needed.
Use `toast.promise(promise, { loading, success, error })` to tie the toast lifecycle to a promise, or call `toast.loading()` and later `toast.success('Done', { id })` with the same id to update it manually.
Duplicate toasts come from two mounted Toasters, such as one in the layout and one in a page, or from `toast()` firing in an effect under React StrictMode double-invocation. Keep one Toaster and fire from event handlers or pass a stable id.
Sonner's injected default styles win the cascade over utility classes. Mark classes with `!important` (for example `!text-red-900`), or switch to `unstyled` or headless `toast.custom()` for full control.
No, the `theme` prop defaults to 'light' and does not track the OS. Set `theme="system"` or pass the resolved theme from a provider like next-themes to the Toaster.
An ancestor element creates a stacking context via transform, filter, or overflow, or the overlay out-z-indexes the toaster. Move `<Toaster />` to the document root, outside any dialog or portal container.
dunaevdmitriys-devPublish deal and pipeline changes to Centrifugo channels for real-time React UI updates.
dnsnamdangValidate Elearning forms and display error toast notifications.
trobiasGuides setup, styling, and troubleshooting of Sonner toast notifications in React applications.
landim32Display user-facing alerts with sonner toast notifications in React projects.