skills.rest
raphaelmans
raphaelmansCOMMUNITY
Explore all skills by this author →
GitHub

ask-sonner

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

Updated Sep 7, 2026
Search Tags:#troubleshooting#react#styling#next.js#notifications#toast#sonner
One-click install
npx skills add https://github.com/raphaelmans/spectralpointengineering --skill ask-sonner-raphaelmans
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: ask-sonner
Source: https://github.com/raphaelmans/spectralpointengineering/tree/main/.skillshare/skills/ask-sonner
Command: npx skills add https://github.com/raphaelmans/spectralpointengineering --skill ask-sonner-raphaelmans

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires sonner.

What problem does it solve? Sonner toasts often fail in confusing ways: they never appear, render twice, ignore Tailwind classes, hide behind modals, or ignore dark mode. This Skill provides authoritative setup patterns, the full toast() API, and a symptom-to-fix troubleshooting table so you resolve Sonner issues without digging through source code. ## Core Features & Use Cases - Setup and call selection: Mount one <Toaster /> at the root and pick the right call — toast(), typed variants, toast.loading, toast.promise, or headless toast.custom. - Styling escalation ladder: Progress from richColors and inline styles through classNames with !important to fully headless custom toasts, plus icon and theme configuration. - Troubleshooting reference: Diagnose duplicate toasts, lost styles, stacking-context clipping, Shadow DOM issues, stuck toast.promise calls, and dark-mode mismatches. - Use Case: Your toast renders behind a modal in a Next.js app. Consult the troubleshooting table, learn the cause is an ancestor stacking context, and move <Toaster /> to the document root. ## Quick Start Ask how to fix a Sonner toast that appears twice in my Next.js app and show the correct Toaster setup.

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 toasts in a Next.js app?▼

Mount a single `<Toaster />` from 'sonner' in your root layout.tsx — it works inside server components. Then call `toast()` from any client-side code such as event handlers; no provider or hook is needed.

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

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.

Why does my Sonner toast appear twice?▼

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.

Why do Tailwind classes not work on Sonner toasts?▼

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

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.

Why is my Sonner toast hidden behind a modal or dialog?▼

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.

Related Skills

Explore More Software Engineering Skills→
LVTD-LLCLVTD-LLC

design-taste-cinematic-product

Generate cinematic product storytelling pages with scene-based reveal sequencing.

Official
Advanced
twhitehead-blackdogtwhitehead-blackdog

error-handling

Implement try/catch patterns, toast notifications, HTTP error categorization, and logging.

Community
Intermediate
CodySwannGTCodySwannGT
3

playwright-selectors

Define Playwright selector best practices for Expo web apps using testID and aria-label.

Community
Basic
ancolemanancoleman
503

providing-feedback

Implement toasts, alerts, modals, and progress indicators in frontend applications.

Community
Intermediate