Shadcn Sonner Toast Components

Shadcn Sonner Toast Component

The Shadcn Sonner Toast is a short, non-blocking notification that slides in to confirm an action, report an error or track a background task, and then disappears on its own. React toast notifications keep users informed without interrupting what they are doing, which makes them the default feedback for saves, uploads and payments.

Promise toasts that switch from a spinner to success or error, Undo and View Order actions, a logout warning with confirm and cancel buttons and a fully custom message card are all covered below. Each shadcn toast is fired with Sonner, the library by Emil Kowalski that shadcn/ui recommends in place of its older toast component, and is rendered with React and styled with Tailwind CSS. Sonner handles stacking, swipe to dismiss and animations, while the shadcn wrapper applies your theme and follows dark mode.

What is the Shadcn Sonner Toast Component?

Sonner has two pieces. The Toaster component is rendered once, usually in your root layout, and acts as the container where toasts appear. The toast() function can then be called from anywhere in your client code, such as an event handler or after a request, to show a message with an optional description, action button, duration and position. There is no provider or hook to set up.

Use a toast for brief feedback that does not need a decision. When the user must confirm or cancel before continuing, use an Alert Dialog. For messages that should stay on the page, such as a form error or a billing notice, use an Alert.

Anatomy of the Shadcn Sonner Toast

12 Shadcn Sonner Toast Variants

Each sonner toast variant listed here is previewed live at the top of this page, together with its source code and install command.

• Basic with action: An event created toast with a date description and an Undo button.
• Success and error: An email sent confirmation with a 3 second duration, and a declined payment error that stays for 5 seconds.
• Promise states: Upload and sync toasts that switch from a loading spinner to a success or error message when the promise settles.
• Actions that trigger follow-ups: Profile saved, order confirmed and task completed toasts whose Undo, View Order or View Tasks button shows a second toast.
• Warning with confirm and cancel: A logout warning with both an action and a cancel button.
• Custom color: A promise toast with a sky blue background set through Sonner's CSS variables.
• Custom content: A new message notification built with toast.custom, an avatar and a Reply button that dismisses it.
• Top center position: The same event toast displayed at the top center of the screen with the position option.

How to Install the Shadcn Sonner Toast Component

Set up shadcn/ui in your project if you have not already, then add the Shadcn UI Kit registry to your components.json once:

{
  "registries": {
    "@shadcnuikit": "https://shadcnuikit.com/r/{name}.json"
  }
}

Then install a sonner toast variant by its name:

npx shadcn@latest add @shadcnuikit/toast1

The same command works with pnpm dlx, yarn dlx and bunx --bun. Each variant has a copy button for every package manager, and the code is added to your project as plain React and Tailwind CSS that you can edit freely.

How to Use the Shadcn Sonner Toast Component

Add the Toaster to your root layout once, then import toast from sonner in any client component and call it from an event handler.

// app/layout.tsx
import { Toaster } from "@/components/ui/sonner"

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="en">
      <body>
        {children}
        <Toaster />
      </body>
    </html>
  )
}

// components/save-button.tsx
"use client"

import { toast } from "sonner"

import { Button } from "@/components/ui/button"

export function SaveButton() {
  return (
    <Button
      variant="outline"
      onClick={() =>
        toast.success("Profile updated", {
          description: "Your changes have been saved.",
          action: { label: "Undo", onClick: () => console.log("Undo") },
        })
      }
    >
      Save changes
    </Button>
  )
}

Why Use the Shadcn Sonner Toast Component

• One line to show a toast: Call toast() from anywhere in client code; no context, provider or hook is required.
• Built-in states: Success, error, info, warning, loading and promise toasts come with matching icons.
• Polished behavior: Toasts stack, expand on hover, pause while hovered and can be swiped away on touch screens.
• Themed automatically: The wrapper uses your popover and border colors and switches with next-themes in dark mode.
• Flexible: Change position, duration and colors per toast, or render fully custom JSX.

Common Sonner Toast Use Cases

• Save confirmations: Confirm that settings or a profile were saved, with an Undo action.
• Form and payment errors: Report a failed request with a clear message and a longer duration.
• Uploads and syncs: Track a background task with toast.promise from loading to done.
• E-commerce events: Added to cart and order placed messages with a link to the order.
• Notifications: New messages or mentions with an avatar and a reply button.
• Copy to clipboard: A quick Copied confirmation after copying a link or code.

Customizing the Shadcn Sonner Toast

Set defaults on the Toaster with props such as position, richColors, expand, closeButton and duration, and override them per toast in the options object. Colors are CSS variables, so a single toast can be recolored through its style option, as in the custom color variant. Because the wrapper reads --popover and --border, a palette from the free Theme Generator restyles all toasts at once.

<Toaster position="top-center" richColors closeButton />

toast("Password changed", {
  duration: 5000,
  style: {
    "--normal-bg": "var(--primary)",
    "--normal-text": "var(--primary-foreground)",
  } as React.CSSProperties,
})

Sonner Toast Accessibility and Keyboard Support

Sonner renders toasts inside a labelled region with aria-live="polite", so screen readers announce new messages without moving focus. Users can jump to the toast region with a keyboard shortcut, which expands the stack, and toasts pause their timer while the stack is expanded or hovered. That gives everyone time to read them and reach the action button.

Keep toast text short, never put the only copy of important information in a toast, and avoid very short durations for toasts that contain an action.

Sonner Toast Best Practices

• Render only one Toaster in your app, usually in the root layout.
• Keep the title to a few words and put details in the description.
• Use toast.promise for async work so users see loading, success and error in one toast.
• Give error toasts and toasts with actions a longer duration than simple confirmations.
• Show at most one action per toast, and use cancel only for a clear second choice.
• Ask for confirmation in an Alert Dialog before destructive actions instead of relying on a toast.

Components Related to Sonner Toast

Shadcn Sonner Toast FAQ

Looking for something else? Browse all shadcn/ui components or ready-made UI blocks built with them.