Skip to content
By emilkowalski

Sonner toast library guide

/ask-sonner

/ask-sonner is a Claude Code skill in the Web & Design section. It is maintained by emilkowalski and published under the MIT license. Helps you set up, style and troubleshoot Sonner, the React toast library: the Toaster, promise toasts, theming, positioning and common bugs.

Author's 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.

How to ask for it

  • Install Sonner and set up the Toaster in my React app
  • My Sonner toasts aren't following dark mode, help me fix it
  • Show a loading toast while this promise resolves

Install

curl -fsSL https://raw.githubusercontent.com/sgomez-dev/claude-skills/main/install.sh | bash

After installing with the script, type /ask-sonner. Using Cursor, Windsurf or Codex? Platform guides

Demo coming soon

↑↓ move · Enter open · Esc close