BlankUI

feedback

Toast

A short message that appears for a few seconds after something happens, like "Saved". Built on sonner.

npx blankui add toast
Raw markdown for agentsRegistry JSON

When to use

  • Confirming an action finished, like saving or copying.
  • Reporting an error from a background action, with an optional Retry action.
  • Offering Undo after an action that is easy to reverse.

Use something else when

Built on sonner. Render one <Toaster /> in the root layout, then call toast() anywhere, including outside React components.

Import

import { Toaster, toast } from "@/components/ui/toast"

Setup

// app/layout.tsx
export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="en" data-theme="default" data-mode="light">
      <body>
        {children}
        <Toaster />
      </body>
    </html>
  )
}

Examples

toast("Link copied")
toast.success("Project created", { description: "Invite your team next." })
toast.error("Could not save changes", { action: { label: "Retry", onClick: save } })
toast("Message archived", { action: { label: "Undo", onClick: unarchive } })

Promise toasts:

toast.promise(saveProject(), {
  loading: "Saving...",
  success: "Saved",
  error: "Could not save",
})

Mistakes to avoid

AvoidInstead
import { toast } from "sonner" in app codeimport { toast } from "@/components/ui/toast"
useToast() hook (old shadcn toast)toast() from @/components/ui/toast
Several <Toaster /> elementsOne <Toaster /> in the root layout
alert('Saved')toast.success("Saved")

Install with the shadcn CLI: npx shadcn add https://blank.vageshwar.dev/r/toast.json