ShadcnStore

Appearance

Shadcn Toast (Sonner) ​

Toasts are brief, non-blocking notifications that appear and disappear on their own. shadcn/ui uses Sonner for toasts, styled with Tailwind CSS v4: render the Toaster once, then call toast() anywhere to confirm an action or report a result. Toasts appear across ShadcnStore app and checkout blocks.

Key features ​

  • Non-blocking notifications stacked in a corner.
  • Success, error, loading, and promise-based toasts.
  • Optional description and action button.
  • Auto-dismiss with pause on hover.
  • Themed to match light and dark mode.

Installation ​

bash
npx shadcn@latest add sonner

Usage ​

Render the Toaster once, near your app root:

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

<Toaster />

Then trigger a toast from anywhere:

tsx
import { toast } from "sonner"
import { Button } from "@/components/ui/button"

<Button onClick={() => toast("Event has been created")}>
  Show toast
</Button>

Variants ​

Call the matching toast helper for each intent. toast.promise swaps its own message as the promise settles. Trigger each below.

tsx
toast.success("Saved")
toast.error("Something went wrong")
toast.warning("Your trial ends soon")
toast.info("A new update is available")
toast("With action", { description: "Sunday at 9:00 AM", action: { label: "Undo", onClick: () => {} } })
toast.promise(save(), { loading: "Saving…", success: "Saved", error: "Failed" })

Built on Sonner ​

Sonner is a standalone toast library and is independent of the UI primitive layer.

Accessibility ​

  • Toasts are announced politely; keep messages short and clear.
  • Do not put critical, only-here information in a toast, since it disappears.
  • Provide an action (like Undo) for reversible operations.

When to use a Toast ​

Use a toast to confirm a completed action or report a background result without interrupting the user: "Saved", "Copied", "Message sent". For a message that must stay visible, use an Alert. For a decision the user must make, use a Dialog or Alert Dialog.

Used in these blocks ​

For persistent inline messages use an Alert; toasts are often triggered by a Button or after a Form submits.

FAQ ​

What is the shadcn toast used for? ​

A toast is a brief, non-blocking notification that appears and disappears on its own, used to confirm actions like saving or to report background results. shadcn uses Sonner for toasts.

How do I trigger a toast? ​

Render the Toaster once near your app root, then call toast() from sonner anywhere to show a message.

What happened to the old shadcn toast component? ​

shadcn now recommends Sonner as the toast component; render its Toaster and call toast() instead of the deprecated toast hook.

How do I show a loading toast for an async action? ​

Use toast.promise(promise, { loading, success, error }) to show a loading toast that resolves to success or error.

Copyright © 2025-2026 ShadcnStore