Sonner

Sonner is the first-stop React toast/notification component for compact, non-blocking product feedback.

Routing Summary

Use Sonner as the default React toast/notification source before hand-rolling non-blocking feedback UI. Start with the app's existing notification component if one exists; otherwise wrap Sonner behind a local API so the project owns copy, tokens, placement, and behavior.

Sonner belongs on the same practical component shelf as Evil Charts: it is not a full design system, but it solves a common product primitive well enough that agents should check it before building custom toast stacks. Use it when React UI needs success, error, info, warning, promise, action, or custom toast feedback with predictable placement and motion. Source: Sonner docs, 2026-07-07

Version Snapshot

Checked against npm on 2026-07-07.

Use

Use Sonner when:

• A React app needs lightweight toast feedback for saves, errors, uploads, background jobs, copy actions, or async promises.
• The feedback should be non-blocking and dismissible, not a modal, banner, or inline validation message.
• The project benefits from a small focused package rather than a full component suite.
• A local design system can wrap Sonner behind an app-owned Toast or notify interface.

Do not use Sonner when:

• The message is critical enough to require an inline error, blocking dialog, or persistent status region.
• A native platform or existing app design system already owns notification behavior.
• The toast content becomes a second navigation surface. Keep actions scarce.

Kevin Stack Route

For Kevin projects, treat Sonner as the default toast route after checking the local component library. Wrap it locally, retokenize color/radius/type/motion, and verify accessibility in the rendered app.

The routing order is:

1. Existing app-owned toast/notification component.
2. Sonner for React toast feedback.
3. UI Primitives Shortlist for other small primitives.
4. Component Library Sources and UI Library Ranking when the need expands into blocks, charts, animation, or design-system primitives.

Timeline

• 2026-07-07 | Promoted Sonner from the combined UI Primitives Shortlist into a first-class tool route because toast/notification feedback is a recurring component-library primitive like Evil Charts for chart UI. Source: User request, 2026-07-07; https://sonner.emilkowal.ski/; https://github.com/emilkowalski/sonner