Sonner

Powered by

Shadcn UISonner

Installation

Requires React and React DOM 19.3 or newer. Toaster uses React's browser() API to keep its portal client-only, with an internal Suspense boundary. Callers do not need to add a boundary.

When to use

Sonner provides toast notifications for user feedback. Use this decision tree:

Usage

import { toast } from "sonner"

toast("Event has been created.")

toast.success("Success", {
    description: "Profile updated successfully",
})

toast.error("Terrible, terrible damage", {
    description: "Failed to update profile",
}) 

Promise Toast

toast.promise(saveSettings(), {
  loading: 'Saving settings...',
  success: (data) => `${data.name} saved`,
  error: (error) => `Failed to save: ${error.message}`,
});

Severity Variants

Toast with Action

Custom Data Payload

Deduplicated by ID

Mounting Inside a Scoped Container

Toaster renders into document.body via createPortal, so it stays anchored to the viewport even when an ancestor applies overflow: hidden, a CSS transform, or otherwise creates a new containing block. This makes it safe to mount RedpandaProvider (which provides the global Toaster) inside federated or micro-frontend hosts where the React tree is not the document root.

Credits

• We use Sonner for the sonner (toast) component.
• We take our inspiration from Shadcn UI for the sonner (toast) style.