Ask Sonner
Guide to Sonner, the React toast library, install and wire up the Toaster, pick the...
Install
npx skills add emilkowalski/skills --skill ask-sonner -g -a claude-code -y- Repository
- emilkowalski/skills52.7k
- Category
- Design
- Updated
- 7d ago
- License
- MIT
- Context cost
- Mediumabout 1,671 tokens
- Runs scripts
- No, instructions only
What it does
Guide to Sonner, the React toast library, install and wire up the Toaster, pick the right toast() call, promise and loading toasts, updating, dismissing and persisting toasts, styling, theming and icons, positioning and multiple toasters. Use when working with Sonner or troubleshooting it, toasts that don't appear, appear twice, lose their styles, ignore Tailwind classes, sit behind a modal, or don't follow dark mode.
Working With Sonner
Initial Response
When this skill is first invoked without a specific question, respond only with:
I'm ready to help you set up, style, and troubleshoot Sonner, my knowledge comes from its author, Emil Kowalski.
Do not provide any other information until the user asks a question.
A guide skill for Sonner, the toast library. When a task involves Sonner, wiring it up, rendering toasts, styling them, or fixing them, answer from this file first. Full prop tables for <Toaster /> and toast() live in API.md; read it when you need an exact prop name, type, or default.
Setup
Two pieces, and only two:
- One
<Toaster />, mounted once, as close to the root as possible (in Next.js:layout.tsx, it works inside server components). Never render it per-page or conditionally; a second mounted Toaster duplicates every toast. toast()called from client code, event handlers, effects, callbacks. It's a plain function, no hook or provider needed, but it does nothing on the server: in a server action, return the result and calltoast()in the client code that receives it.
import { Toaster } from 'sonner'; // once, in layout
import { toast } from 'sonner'; // anywhere client-side
