Toast

Both buttons are live; the promise toast transitions loading → success.

Install

npx shadcn@latest add https://plinth.dhrumilkherde.com/r/toast.json

Usage

Put ToastProvider and one Toaster at your app root, then fire toasts from anywhere:

// layout.tsx
import { ToastProvider, Toaster } from "@/components/ui/toast";

<ToastProvider>
  {children}
  <Toaster />
</ToastProvider>

// anywhere below the provider
import { useToast } from "@/components/ui/toast";

const toast = useToast();

toast.add({ title: "Saved", description: "Your changes are live." });

toast.promise(deploy(), {
  loading: { title: "Deploying…" },
  success: { title: "Deployed" },
  error: { title: "Deploy failed" },
});

API

useToast() returns the Base UI toast manager: add(options), update(id, options), close(id), and promise(promise, states). Provider props: timeout (default 5000ms) and limit.

Accessibility

• Toasts are announced via a live region; hovering or focusing the viewport pauses timers.
• Swipe right or down to dismiss on touch; the close button covers keyboard and pointer.
• Keep toasts to confirmations; anything requiring a decision belongs in a Dialog.