Sonner

uistable

Sonner — extracted 1:1 from WEM-App.

npx shadcn add @krawma/sonner

npm: next-themes@^0.4.6, sonner@^2.0.7

Preview

Purpose

Transient toast notifications (built on sonner) — brief, auto-dismissing feedback for the result of an action ("Saved", "Copy failed"). For persistent in-context messages use alert; for blocking decisions use alert-dialog.

Anatomy

Mount <Toaster /> once near the app root; trigger toasts imperatively from anywhere via sonner's toast(...) API. The Toaster is theme-aware (reads next-themes).

Style

No variants exposed here — sonner's built-in toast types (success/error/etc.) render token-aware in light and dark via the wrapper.

Behavior & functionality

One <Toaster /> per app; call toast() / toast.success() / toast.error() to enqueue. Toasts auto-dismiss and stack.
Keep messages short; put any follow-up action in a toast action button.

Accessibility

sonner announces toasts via an ARIA live region — don't put essential-only info or the sole path to an action in a toast (it disappears). Give critical errors a persistent surface too.

Do / Don't

✅ Use for ephemeral success/error feedback after an action.
❌ Don't use for information the user must act on or read carefully — use alert / alert-dialog.