Question 1

What is Sonner?

Accepted Answer

A small notice that pops up after an action, such as Saved or Copied to clipboard, and closes on its own. shadcn.io's Sonner is a themed `Toaster` around the sonner library: it stacks toasts, lets people swipe them away, and ties a toast to a promise. Every example here renders its own `Toaster` and calls `toast` from a button.

Question 2

Are these Sonner examples free?

Accepted Answer

Yes. Every example is free to use in personal and commercial projects, with no attribution. Seeing the code and installing it takes a free shadcn.io account. The sonner library itself is MIT-licensed.

Question 3

Toast, Alert or Dialog: which one?

Accepted Answer

A toast is brief feedback after an action that closes by itself. An Alert stays in the page for status that matters until it changes, like a form error summary. A Dialog interrupts for something that needs an answer, like a delete confirmation. Pick by how long the message must stay: a moment (toast), as long as it's true (alert), until answered (dialog).

Question 4

Do these examples work in Vue, Svelte and Solid?

Accepted Answer

sonner is a React library, so these examples are React only, on all four React libraries. For Vue, Svelte and Solid, use shadcn.io's Toast component, built on Ark UI.

Question 5

How do I show a success, error, warning or info toast?

Accepted Answer

Call `toast.success`, `toast.error`, `toast.warning` or `toast.info` with the message. Each sets the toast's type, and `Toaster` adds the matching icon. A plain `toast` has no icon.

Question 6

How do I tie a toast to a promise?

Accepted Answer

Pass the promise to `toast.promise` with `loading`, `success` and `error` messages. One toast shows the loading line, then swaps to the success or error line when the promise settles. `success` and `error` can be functions of the result or the error.

Question 7

How do I add an Undo button?

Accepted Answer

Pass `action` with a `label` and an `onClick`, such as Undo. Add `cancel` the same way for a second button. Clicking either runs its `onClick` and closes the toast.

Question 8

How do I install a Sonner example?

Accepted Answer

Sign in with a free account, open the example and run the install command it shows. It adds the example, shadcn.io's Sonner and the sonner package to your project. In an app, render one `Toaster` near the root; every `toast` call shows there.

Question 9

Where do toasts appear?

Accepted Answer

`Toaster` puts toasts at the bottom right unless you set its `position`: `top-left`, `top-center`, `top-right`, `bottom-left`, `bottom-center` or `bottom-right`. Pass `position` on one `toast` call to move only that toast.

Question 10

How do I change how long a toast stays?

Accepted Answer

A toast stays 4 seconds. Pass `duration` in milliseconds on the call, or on `Toaster` for every toast. A loading toast stays until you update or dismiss it.

Question 11

Which libraries do Sonner examples use?

Accepted Answer

shadcn.io's Sonner (the themed `Toaster`), the sonner library, shadcn.io's Button, Tailwind CSS and Lucide icons. The Button comes from your React library: Base UI, React Aria, Ark UI or Radix UI.

Question 12

Are the toasts accessible?

Accepted Answer

sonner renders toasts in a labelled live region, so screen readers announce new ones, and it pauses the timer while the pointer is over them. Action and cancel buttons are real buttons. Keep the message short so it's heard before the toast closes.

Question 13

Can I use these with React Server Components?

Accepted Answer

`Toaster` and the buttons that call `toast` are client components. A Server Action can return what happened, and the client calls `toast` once it completes.

Sonner Examples

Toast with Custom Duration

Toast with Custom Icon

Toast with Description

Toast with Multi-line Content

Toast with Rich HTML Content

Non-Dismissible Toast

Toast with Action and Cancel

Toast with Action Button

Toast with Cancel Button

Bottom Center Position

Bottom Left Position

Bottom Right Position

More component examples

Spinner

Alert

Empty State

Progress

Skeleton

Switch

Table

Tabs

Sonner examples MCP, with Pro

Individual

Team

Organization

Individual

Team

Organization

Frequently asked questions

Every sonner example. One prompt away.