Building blocks and outside APIs · Library

Sonner

A React library for toasts, the small messages that slide in to say 'Saved' or 'Something went wrong' and then disappear on their own.

Interface pieces · Open source · updated

How it works

You place one Toaster component near the root of the app and call toast('Saved') from anywhere, even outside React components. It has success, error, loading and custom toasts, action buttons such as Undo, and toast.promise, which shows a loading message that turns into success or failure when a request settles. Toasts stack neatly and can be swiped away.

shadcn/ui adopted Sonner as its recommended toast component, which made it a common choice in Tailwind-based React apps. Toasts suit brief, non-critical feedback. Errors that need a decision, or anything users must not miss, belong in the page or a dialog, and toasts that matter should stay long enough to read and be announced to screen readers.

Sonner pricing

Open source

Free (MIT).

Approximate, checked September 2026.What the other tools cost

More in Building blocks and outside APIs

Interface pieces

All 14 Building blocks and outside APIs terms

Crafted in the dark. Shipped to the world.

Tell us what you are building. You get a private project space with a proposal and a line-by-line quote within a day.