Without a centralized toast system, apps scatter notification logic across dozens of components—each managing local state, timing, and positioning from scratch. Duplicated auto-dismiss logic drifts; some toasts stack on top of each other, others dismiss too early or never. Dark-mode tokens become inconsistent; a11y semantics like role="alert" are forgotten. The moment a designer changes the spacing or icon set, the changes ripple across the codebase.

Toast is a provider-based notification system with a Toast.Provider wrapper that centralizes position and max-stack limits. Call useToast() inside to access the toast() function, which accepts a ToastData object with title, optional description, five variant options (default, success, error, warning, info), and duration in milliseconds. The dismiss(id) function closes a toast by ID. All toasts render with stable data-react-fancy-toast-item attributes and role="alert" for a11y; variants auto-apply icon, color, and dark-mode styling.

Wrap your app with <Toast.Provider position="bottom-right" maxToasts={5}>, then call const { toast } = useToast() anywhere inside. Fire a notification with toast({ title: "Done", description: "File uploaded", variant: "success", duration: 4000 }) or let the default 5-second duration apply. The toast system manages dismissal, stacking, and theming; agents can read/write via the stable id returned by toast() and the dismiss(id) bridgeable function.