# Shadcn Sonner > Open-source shadcn Sonner toast components for success feedback, error states, and non-blocking updates. - Type: shadcn/ui component, free - Page: https://web.dev.reui.io/components/sonner - Docs (Base UI): https://ui.shadcn.com/docs/components/base/toast.md - Docs (Radix UI): https://ui.shadcn.com/docs/components/radix/sonner.md - MCP: `get_component("sonner")`, then `get_examples("sonner")` - Examples: 21 ## When to use - Brief feedback after an action, such as a created event or an archived message with Undo - Progress of async work in one toast that updates in place, from loading to success or failure - Rich notifications for messages, invites, deploys, builds and integrations, with their own buttons ## When not to use - A status or warning that must stay on the page until the problem is fixed: use [Alert](https://web.dev.reui.io/components/alert.md) (`get_component("alert")`) - A choice the user has to make before the page can carry on: use [Alert Dialog](https://web.dev.reui.io/components/alert-dialog.md) (`get_component("alert-dialog")`) - An inbox panel that lists past activity for the user to review on demand: use the [Sheet blocks](https://web.dev.reui.io/blocks/application/sheet.md) ## Agent notes - The examples ship only the sonner package and never render `Toaster`; mount the shadcn sonner `Toaster` once near your app root or no `toast` shows ## Third-party libraries - Sonner v2: [API reference](https://sonner.emilkowal.ski/toast), [docs](https://sonner.emilkowal.ski/getting-started) ## Examples - [Basic](https://web.dev.reui.io/components/sonner/c-sonner-1.md): Basic toast notification.. Best for a single line message from one bare call with no options, the minimum a toast needs. - [With Description](https://web.dev.reui.io/components/sonner/c-sonner-2.md): Toast notification with description.. Best for a title over a second line passed as description, here an event name with its date and time. - [Positions](https://web.dev.reui.io/components/sonner/c-sonner-3.md): Toast positions. Best for a grid of 6 buttons that each send their toast to a different top or bottom corner or center. - [Variant Icons](https://web.dev.reui.io/components/sonner/c-sonner-4.md): Toast variants with colored icons. Best for default, success, error, warning, info and loading side by side, with the 4 status icons each tinted its own color. - [Durations](https://web.dev.reui.io/components/sonner/c-sonner-5.md): Toast duration options. Best for timers of 2, 5 and 10 seconds beside a persistent notice that stays until it is closed. - [Action Button](https://web.dev.reui.io/components/sonner/c-sonner-6.md): Toast with action button. Best for an archive notice with an Undo button inside the toast that confirms with a second success toast. - [Promise](https://web.dev.reui.io/components/sonner/c-sonner-7.md): Promise toast with loading state. Best for a deploy whose spinner becomes a success or error line when its promise settles, quoting the resolved name. - [Action & Cancel](https://web.dev.reui.io/components/sonner/c-sonner-8.md): Toast with custom close and cancel buttons. Best for a delete prompt inside the toast with a Delete action and a Cancel button that just closes it. - [Rich Content](https://web.dev.reui.io/components/sonner/c-sonner-9.md): Toast with custom rich content. Best for a teammate chat message with avatar, sender, time ago and Reply and Dismiss buttons on the popover surface. - [Upload Progress](https://web.dev.reui.io/components/sonner/c-sonner-10.md): Toast with upload progress simulation. Best for a file card whose progress bar fills in place under one toast id, closing 3 seconds after it reaches 100. - [Status Alert](https://web.dev.reui.io/components/sonner/c-sonner-11.md): Toast with status alert markup. Best for a deploy result with a green status dot, environment, duration and commit rows, and View Logs and Open Site. - [Accent Border](https://web.dev.reui.io/components/sonner/c-sonner-12.md): Custom accent border toast. Best for a release notice marked by a thick blue left edge and an info icon, offering Later or Update Now. - [Invert Success](https://web.dev.reui.io/components/sonner/c-sonner-13.md): Custom invert success toast. Best for a paid invoice confirmation on the inverted surface with a green check badge and one View Receipt button. - [Invert Error](https://web.dev.reui.io/components/sonner/c-sonner-14.md): Custom invert error toast with details. Best for a failed build listing 2 file and line errors in monospace above View Logs and a red Retry Build. - [Invert Info](https://web.dev.reui.io/components/sonner/c-sonner-15.md): Custom invert info toast with avatar. Best for a collaboration invite from a named teammate with an avatar, a Decline and a blue Accept on the inverted surface. - [Invert Warning](https://web.dev.reui.io/components/sonner/c-sonner-16.md): Custom invert warning toast with countdown. Best for a session timeout warning held for 10 seconds, whose amber Extend Session button swaps in a success toast. - [Invert Avatar Group](https://web.dev.reui.io/components/sonner/c-sonner-17.md): Multi-action invert toast with avatar group. Best for a pull request ready to merge, with an overlapping stack of 3 reviewer avatars and View and green Merge. - [Close Top Right](https://web.dev.reui.io/components/sonner/c-sonner-18.md): Toast with close button on top-right. Best for an uploaded file notice whose close button is moved from the default top left corner to the top right. - [Custom Icon](https://web.dev.reui.io/components/sonner/c-sonner-19.md): Toast with custom icon. Best for a row of 3 plain notices that each pass their own leading glyph: send, download and bookmark. - [Integration](https://web.dev.reui.io/components/sonner/c-sonner-20.md): Custom integration toast. Best for a connected workspace card with a gradient link tile, Active status, a channel sync line and Configure and Open Dashboard. - [Updatable](https://web.dev.reui.io/components/sonner/c-sonner-21.md): Updatable toast with ID. Best for a spinner line rewritten through a stored toast id from preparing to 30 and 70 percent, then a success card. Every ReUI item has a twin like this one; the index is https://web.dev.reui.io/llms.txt. Agents with the ReUI MCP (https://web.dev.reui.io/docs/mcp) get the same guidance from the getters named above.