Skip to content

Foundations

Toast Stack

Notifications that stack, expand on hover, pause while hovered, swipe or click to dismiss, with actions.

2 variantsMIT

Preview

    Installation

    Copies the component into components/ui and installs its dependencies and theme tokens.

    pnpm dlx shadcn@latest add https://tuffui.com/r/toast-stack.json

    Usage

    Pass your own data and wire the callbacks to your agent runtime.

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

// Once, near the root of the app:
<Toaster />

// Anywhere:
toast.success("Link copied");
toast.error("Couldn't send", { description: "Check your connection." });
toast("Chat archived", { action: { label: "Undo", onClick: restore } });
toast.promise(exportChat(), {
  loading: "Exporting…",
  success: "Exported to Markdown",
  error: "Export failed",
});

    Props

    PropTypeDefaultDescription
    visiblenumber3Toaster. Toasts shown in the collapsed stack; hover fans them all out.
    position"bottom-right" | "bottom-center""bottom-right"Toaster. Where the stack sits.
    toast(title, options?)(title: ReactNode, options?: ToastOptions) => string—Shows a toast and returns its id. Also .success, .error, .loading, .promise and .dismiss(id).
    type ToastOptions = {
  id?: string;           // reuse an id to update a toast in place
  description?: ReactNode;
  action?: { label: string; onClick: () => void };
  duration?: number;     // ms; default 4000, errors 6000, loading until updated
};