Question 1

What is shadcn sonner?

Accepted Answer

Sonner is the React toast library by Emil Kowalski (vercel.com, linear.app, dub.co use it). It's the most polished toast primitive in the React ecosystem — proper stacking with smooth animations, swipe-to-dismiss on touch, promise-state toasts (loading → success/error), action buttons. shadcn/ui ships sonner as the canonical toast solution. Each example in this gallery is a single self-contained TSX file.

Question 2

Are these sonner examples free?

Accepted Answer

Yes, every sonner example on shadcn.io is free for personal and commercial use — no attribution requirement, no runtime dependency, no gating. Sonner itself is MIT-licensed too.

Question 3

Toast (Sonner) vs Alert vs Dialog — when do I use each?

Accepted Answer

Toast for transient feedback after an action — "Saved", "Copied to clipboard", "Error: try again". Auto-dismisses, doesn't require user action. Alert for persistent in-flow status (form validation summary, account-wide warning banner). Dialog for actions that demand the user's full attention (confirmations, complex forms). Pick by persistence: ephemeral (toast), persistent in-page (alert), interrupting (dialog).

Question 4

Why use Sonner over react-toastify or react-hot-toast?

Accepted Answer

Sonner has the best out-of-the-box animation polish (the stacking effect feels native), a tiny API surface (`toast.success("Saved")` and you're done), promise toasts (`toast.promise(savePromise, {...})`) for async actions, and proper accessibility. react-hot-toast is simpler but lacks promise state and richer compositions; react-toastify is more configurable but feels dated. Sonner hits the right balance for most React apps.

Question 5

How do I show a success / error / warning / info toast?

Accepted Answer

Use the standard variants: `toast.success("Saved")`, `toast.error("Failed to save")`, `toast.warning("Quota nearly reached")`, `toast.info("New version available")`. Each renders with the appropriate color treatment and icon. For custom appearance per variant, configure the `<Toaster>` component once with theme overrides.

Question 6

How do I tie a toast to an async promise (loading → success / error)?

Accepted Answer

Use the promise variant: `toast.promise(savePromise, { loading: "Saving…", success: (data) => "Saved", error: (err) => err.message })`. Sonner shows the loading toast immediately, swaps to success or error based on the promise outcome, and auto-dismisses after the result. This is the canonical async-action feedback pattern — write it once per action.

Question 7

How do I add an action button ("Undo" after delete)?

Accepted Answer

Use the interactive variant. `toast("Item deleted", { action: { label: "Undo", onClick: () => restoreItem() } })`. The action button appears next to the toast text. Common pattern: optimistic delete → toast with Undo → if user clicks Undo, restore; if not, the soft-delete becomes permanent after the toast dismisses. Gives users a graceful escape from accidental destructive actions.

Question 8

How do I install a sonner example?

Accepted Answer

Run the `npx shadcn@latest add` command shown under the Installation heading. The CLI copies the example's TSX source into `components/examples/sonner/…`, plus the shadcn/ui Sonner wrapper (and the sonner package). Mount `<Toaster />` once in your root layout — every `toast.*()` call throughout the app feeds into it.

Question 9

Where in the screen should toasts appear?

Accepted Answer

Bottom-right is the modern default (Sonner's default position) — out of the way, doesn't cover content. Top-right works for apps that already use the bottom for navigation. Top-center for high-importance announcements. Bottom-center on mobile (thumb-reachable). Pass `position="bottom-right" | "top-right" | …` to the `<Toaster>` mounted in your layout.

Question 10

How do I customize the toast duration or make some persist?

Accepted Answer

Pass `duration={5000}` (default 4000ms) per call: `toast.success("Saved", { duration: 8000 })`. For persistent toasts (require user dismiss), set `duration={Infinity}`. Use sparingly — persistent toasts feel like alerts and should be alerts. For multi-step async actions, use a single promise toast with descriptive labels rather than a chain of timed toasts.

Question 11

Which libraries do sonner examples depend on?

Accepted Answer

sonner by Emil Kowalski (the toast primitive — animations, stacking, promise state, queue), shadcn/ui Sonner wrapper (theme-aware Toaster generated into your project by the CLI), Tailwind CSS. React 19 baseline. No state library — the `toast.*()` API maintains its own internal queue.

Question 12

Are sonner examples accessible for screen reader users?

Accepted Answer

Yes. Sonner uses `aria-live="polite"` (or `"assertive"` for error toasts) so screen readers announce new toasts. Sonner pauses the auto-dismiss timer when the user hovers or focuses the toast — important for users who need extra time to read. For action toasts, the action button is a real `<button>` keyboard-focusable in the toast's tab cycle.

Question 13

Can I use these sonner examples with React Server Components?

Accepted Answer

The Toaster is a client component (it manages the toast queue and DOM portal). Mount it in a client-boundary layout (or inside the root `<body>` with `"use client"`). The `toast.*()` calls fire from any client code; for Server Actions, return the toast intent from the action and trigger it client-side once the action completes.

React Sonner Examples for shadcn/ui

Browse every sonner example

Frequently Asked Questions