skills.rest
KlyrhonMiko
KlyrhonMikoCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

ask-sonner

Guides setup, styling, and troubleshooting of Sonner toast notifications in React applications.

Updated Aug 25, 2026
Search Tags:#troubleshooting#React#notifications#nextjs#tailwind#toast#sonner
One-click install
npx skills add https://github.com/KlyrhonMiko/kly-skills --skill ask-sonner-klyrhonmiko
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: ask-sonner
Source: https://github.com/KlyrhonMiko/kly-skills/tree/main/data/skills/ask-sonner
Command: npx skills add https://github.com/KlyrhonMiko/kly-skills --skill ask-sonner-klyrhonmiko

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Developers integrating the Sonner toast library often hit issues like toasts not appearing, appearing twice, losing Tailwind styles, hiding behind modals, or ignoring dark mode. This Skill provides authoritative setup patterns, API references, and a symptom-to-fix troubleshooting table so these problems are resolved correctly the first time. ## Core Features & Use Cases - Setup and call selection: Mount one <Toaster /> at the root and pick the right toast() variant — success, error, loading, promise, or custom — for each notification scenario. - Styling escalation ladder: Progress from defaults and richColors through inline styles and classNames with !important up to fully headless toast.custom() for design-system toasts. - Troubleshooting table: Diagnose common failures such as duplicate toasts under StrictMode, lost stylesheets in Astro, Shadow DOM styling, stacking-context clipping, and stuck toast.promise loading states. - Use Case: When a toast renders behind a modal in a Next.js app, consult the troubleshooting table to learn the fix is moving <Toaster /> to the document root outside any portal container. ## Quick Start Ask how to set up Sonner in a Next.js app and show a loading toast that updates to success when an upload finishes.

Frequently Asked Questions about ask-sonner

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I set up Sonner toast notifications in Next.js?▼

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 code such as event handlers; never render the Toaster per-page or conditionally.

How to show a loading toast that becomes success in Sonner?▼

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 transition to a promise.

Why do Sonner toasts appear twice in React?▼

Duplicate toasts come from two mounted Toasters or from calling `toast()` inside an effect under React StrictMode's dev double-invoke. Keep one Toaster at the root and fire toasts from event handlers, or pass a stable id so repeats update instead.

Why do Tailwind classes not work on Sonner toasts?▼

Sonner's injected default styles win the cascade over utility classes. Mark classes with `!important` (e.g. `!text-red-900`), or switch to `unstyled: true` or headless `toast.custom()` for full control over the markup.

Does Sonner follow system dark mode automatically?▼

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 via `<Toaster theme={resolvedTheme} />`.

Why is my Sonner toast hidden behind a modal?▼

An ancestor with transform, filter, or overflow creates a stacking context, or the overlay out-z-indexes the toaster. Move `<Toaster />` to the document root, outside any dialog or portal container, to fix clipping and layering.

Related Skills

Explore More Software Engineering Skills→
dunaevdmitriys-devdunaevdmitriys-dev

create-centrifugo-integration

Publish deal and pipeline changes to Centrifugo channels for real-time React UI updates.

Community
Intermediate
dnsnamdangdnsnamdang

elearning-validate

Validate Elearning forms and display error toast notifications.

Community
Intermediate
mahg-esmahg-es
3

theme-design

Design CSS theme systems with design tokens, color palettes, and typography scales.

Official
Intermediate
beelabstudiobeelabstudio

ask-sonner

Guides setup, styling, and troubleshooting of Sonner toast notifications in React applications.

Official
Intermediate