Sonner
Opinionated, minimal toast notification library for React. Beautiful default styling with smooth animations. Promise-based toasts that show loading state and resolve to success/error. Stack and queue management. Used in shadcn/ui and recommended by Vercel. Zero configuration by default with sensible defaults for position, duration, and styling.
Score Breakdown
⚙ Agent Friendliness
🔒 Security
Toast notification library — no network access. Avoid displaying sensitive data in toast messages.
⚡ Reliability
Best When
React applications needing simple, beautiful toast notifications with minimal setup.
Avoid When
You need persistent notification history, complex notification types, or non-React frameworks.
Use Cases
- • Show success/error notifications after async operations: toast.promise(apiCall(), {loading, success, error})
- • Display user feedback notifications with toast() calls: toast.success('Saved!'), toast.error('Failed')
- • Implement notification stacking with automatic queue management and dismiss on click
- • Add rich toast notifications with actions (undo buttons) via toast.action() API
- • Use shadcn/ui's Sonner integration for consistent notifications in shadcn-based projects
Not For
- • Complex notification center with history — Sonner is transient toasts only; use a proper notification system for persistent history
- • Non-React frameworks — Sonner is React-only; use Notyf or vanilla JS solutions for other frameworks
- • Alert dialogs requiring user action — use a dialog/modal for blocking notifications that require response
Interface
Authentication
UI library — no auth needed.
Pricing
MIT licensed open source library.
Agent Metadata
Known Gotchas
- ⚠ <Toaster /> component must be placed in the app root — without it, toast() calls are silently ignored
- ⚠ Sonner uses portals — the toast container renders outside the component tree; ensure Toaster is in a context that provides necessary providers (theme, etc.)
- ⚠ toast.promise() requires the promise to be passed directly — passing a promise result (resolved value) instead of the promise itself won't show loading state
- ⚠ theme prop on <Toaster /> should match your app's dark/light mode — hardcoding 'light' will cause theme mismatch in dark mode apps
- ⚠ Custom toast components via toast.custom() lose default styling — must manually add Sonner's CSS classes for consistent look
- ⚠ Sonner v1 changed the API from the alpha version — older tutorials may use different options syntax
Alternatives
Full Evaluation Report
Detailed scoring breakdown, competitive positioning, security analysis, and improvement recommendations for Sonner.
Scores are editorial opinions as of 2026-03-06.