Toast

Stackable notification toasts with support for multiple types (success, error, warning, info, loading), action buttons, and configurable positioning. Uses a global toastManager to trigger toasts imperatively.

$npx shadcn add @patchui/toast

Types

Default

With Description

With Action

Usage

import {
  ToastProvider,
  toastManager,
  showToast,
} from "@patchui/react";
 
// 1. Wrap your app (or page) with ToastProvider
function App() {
  return (
    <ToastProvider position="bottom-right">
      <MyContent />
    </ToastProvider>
  );
}
 
// 2. Trigger toasts from anywhere
toastManager.add({ title: "Saved!", type: "success" });
toastManager.add({ title: "Error occurred", type: "error" });
toastManager.add({
  title: "File deleted",
  actionProps: {
    children: "Undo",
    onClick: () => { /* undo logic */ },
  },
});
 
// Shorthand helper
showToast("Hello world");
showToast.success("Saved!");
showToast.error("Something went wrong");

Props

ToastProvider

Prop	Type	Default	Description
position	"top-left" \| "top-center" \| "top-right" \| "bottom-left" \| "bottom-center" \| "bottom-right"	"bottom-right"	Where toasts appear on screen.
children	ReactNode	-	The app content that can trigger toasts.

toastManager API

The toastManager is a global singleton created with Toast.createToastManager(). Use it to add toasts imperatively from any component.

toastManager.add({
  title: string;        // Required - the toast heading
  description?: string; // Optional secondary text
  type?: "success" | "error" | "warning" | "info" | "loading";
  actionProps?: {
    children: ReactNode; // Action button label
    onClick: () => void; // Action callback
  };
});

showToast Helper

A convenience wrapper around toastManager.add:

showToast("Message");           // Default toast
showToast.success("Saved!");    // Success toast
showToast.error("Failed!");     // Error toast

Notes

ToastProvider is required: Toasts only appear inside a ToastProvider. Without it, toastManager.add() calls are silently dropped. Place one provider at the root of your app.
Global singleton: toastManager is created once at module level - you can import and use it from any file without prop drilling.
Stacking behavior: Multiple toasts stack with a peek animation. Hover over the stack to expand all toasts.
Auto-dismiss: Toasts auto-dismiss after 5 seconds by default. Loading toasts persist until manually dismissed.
Swipe to dismiss: Toasts support swipe gestures on touch devices, with direction determined by the position.
Action buttons: Use actionProps to add a single action button (e.g. "Undo") to the toast.