---
title: "Working With Sonner - Air Market"
description: "You are using Sonner for toast notifications in React and something is off: nothing appears, it appears twice, the styling is ignored, or it hides behind a modal. This is a guide to setting it up and…"
canonical: "https://airmarket.ai/app/ask-sonner"
---

[Air Market](/) / [Design](/category/design) / Working With Sonner

Skill by [Emil Kowalski](/@emilkowalski)

# Working With Sonner

Fix toasts that don't show, show twice, or lose their styles

## What this does

You are using Sonner for toast notifications in React and something is off: nothing appears, it appears twice, the styling is ignored, or it hides behind a modal. This is a guide to setting it up and to the things that commonly go wrong. Reach for it when you are wiring toasts up or when one is misbehaving.

### Top 3 things it does for you

- Wire up the Toaster and pick the right toast call
- Fix a toast that never appears or appears twice
- Show loading and promise states in a toast

## Information

**Working With Sonner at a glance**

|  |  |
| --- | --- |
| Kind | Skill |
| Publisher | [Emil Kowalski](/@emilkowalski) |
| Category | [Design](/category/design) |
| Works with | Agent Skills - an open standard supported by 40+ agents |
| Size | 11 KB |
| Licence | MIT |
| Repository | [emilkowalski/skills](https://github.com/emilkowalski/skills/tree/78761e1b57f97dce65b983d640c70a68f39e8163/skills/ask-sonner) |
| GitHub stars | 32,021 (as of Nov 2026) |
| Installs | 176,148, counted by skills.sh (Nov 2026) |

## Security report

**Verified.** AIR scanned this exact version of Working With Sonner and flagged nothing. AIR's verdict: **safe**.

**What Working With Sonner's check was run against**

|  |  |
| --- | --- |
| Commit | 78761e1b57f97dce65b983d640c70a68f39e8163 |
| Content hash | f98c5db0ac99a70161d9fa246568afe49a34c4d0985202cf4652a03e46a9cfdd |
| Files read | [Browse the files at this exact commit](https://github.com/emilkowalski/skills/blob/78761e1b57f97dce65b983d640c70a68f39e8163/skills/ask-sonner/SKILL.md) |

A scan is named by the exact content it read, not by a version number. A different version is a different artifact, and nothing here applies to a version AIR has not scanned.

[Read the full security report for Working With Sonner](/security/ask-sonner)

## About Working With Sonner

A guide to Sonner, the React toast library. It covers installing and wiring up the Toaster, picking the right toast() call, promise and loading toasts, updating, dismissing and persisting toasts, styling, theming and icons, and positioning and multiple toasters.

Use it 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.

## What's inside

- SKILL.md - instructions
- API.md - reference

## Questions

### Is Working With Sonner safe to install?

AIR scanned this exact version of Working With Sonner and flagged nothing. AIR's verdict: safe. The verdict is named by the content that was read, at commit 78761e1b57f9, so it cannot drift onto a version nobody scanned. The full report is at https://airmarket.ai/security/ask-sonner.

### How do I install Working With Sonner?

Open https://airmarket.ai/app/ask-sonner on Air Market and use the install action: Air Market hands Claude a prompt naming this exact skill, and Claude sets it up. Source, pinned to the exact commit this listing describes: https://github.com/emilkowalski/skills/tree/78761e1b57f97dce65b983d640c70a68f39e8163/skills/ask-sonner. Install from that link, not the branch.

## Related on Air Market

- [More Design listings](/category/design)
- [Everything by Emil Kowalski](/@emilkowalski)

---

Canonical URL: <https://airmarket.ai/app/ask-sonner>