sonner

What problem does it solve?

This Skill removes the friction of manual UI status handling by helping you add, debug, and standardize toast notifications so users always get clear success/error/loading feedback during operations.

Core Features & Use Cases

• Global, hook-free toast UX: Mount <Toaster /> once and trigger toast.* from anywhere, including mutation callbacks and error handlers.
• Promise and lifecycle feedback: Use toast.promise(...) to convert async operations into consistent loading→success/error flows.
• Progress, dedupe, and updates: Use stable id values to update a single toast (e.g., progress and retries) instead of spamming the user.
• React Query integration pattern: Wire MutationCache / QueryCache global onError to show default error toasts with minimal boilerplate.
• Shadcn/ui + theme wiring: Place Sonner’s <Toaster /> at the correct root location and apply theme/richColors/classNames without common footguns.

Quick Start

Add a single root <Toaster /> to your app, then replace your scattered success/error UI with toast.promise(mutation.mutateAsync(...), { loading, success, error }) for each async action.