Toast

InstallationCopy Anchor Link

pnpm dlx shadcn@latest add @columbus/toast

Then mount the providers once, in your root layout:

import { AnchoredToastProvider, ToastProvider } from "@/components/ui/toast";

export default function RootLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <html lang="en">
      <body>
        <ToastProvider>
          <AnchoredToastProvider>{children}</AnchoredToastProvider>
        </ToastProvider>
      </body>
    </html>
  );
}

AnchoredToastProvider is only needed for anchored toasts. Mount each provider only once: every provider shows every toast.

UsageCopy Anchor Link

Call toastManager.add from anywhere, like an event handler:

import { toastManager } from "@/components/ui/toast";

toastManager.add({
  title: "Event has been created",
  description: "Monday, January 3rd at 6:00pm",
});

Toasts close on their own after 5 seconds, and you can swipe them away. Hovering or focusing the stack pauses the timer. Screen readers announce new toasts politely, without interrupting.

Set position on ToastProvider to move the stack, for example <ToastProvider position="top-center">.

TypesCopy Anchor Link

type adds a status icon. loading shows a spinner.

ActionCopy Anchor Link

actionProps adds a button to the toast. Give action toasts a longer timeout so people have time to use the button.

PromiseCopy Anchor Link

toastManager.promise shows a loading toast, then turns it into a success or error toast when the promise settles.

Update instead of stackingCopy Anchor Link

Pass the same id to toastManager.add to update a toast that's already showing instead of adding another one:

toastManager.add({ id: "save-status", title: "Draft saved", type: "success" });

Anchored toastsCopy Anchor Link

anchoredToastManager shows a toast next to an element, which suits short feedback like "Copied!". Pass data: { tooltipStyle: true } for a compact, title-only look.

API referenceCopy Anchor Link

Built on Base UI Toast. toastManager.add accepts every Base UI toast option, including title, description, type, timeout, priority, actionProps, and onClose. It returns the toast's id, which you can pass to toastManager.close or toastManager.update.

ToastProviderCopy Anchor Link

Also accepts every Base UI Toast.Provider prop, like timeout and limit.

Toast options added by ColumbusCopy Anchor Link