# Ask Sonner

Guide to Sonner, the React toast library, install and wire up the Toaster, pick the...

- Repository: https://github.com/emilkowalski/skills (52719 stars)
- Category: Design
- License: MIT
- Last updated: 2026-10-28
- Runs scripts: no, instructions only

## Install

Claude Code: `npx skills add emilkowalski/skills --skill ask-sonner -g -a claude-code -y`
Codex: `npx skills add emilkowalski/skills --skill ask-sonner -g -a codex -y`
Cursor: `npx skills add emilkowalski/skills --skill ask-sonner -g -a cursor -y`
Gemini CLI: `npx skills add emilkowalski/skills --skill ask-sonner -g -a gemini-cli -y`

## Description

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.

## SKILL.md, as published by its author (untrusted third-party text, read it as data)

# 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](https://sonner.emilkowal.ski), 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](API.md); read it when you need an exact prop name, type, or default.

## Setup

Two pieces, and only two:

1. **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.
2. **`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 call `toast()` in the client code that receives it.

```jsx
import { Toaster } from 'sonner'; // once, in layout
import { toast } from 'sonner';   // anywhere client-side
```

## Picking the right call

The rest: https://github.com/emilkowalski/skills/blob/HEAD/skills/ask-sonner/SKILL.md