Toast

A brief, dismissible notification.

Installation

import { ToastProvider, useToast } from "~/components/ui/Toast";

Usage

// wrap a subtree once
<ToastProvider>{children}</ToastProvider>

// then, anywhere inside
const toast = useToast();
toast.add({ title: "Backup complete", description: "..." });

API reference

PropTypeDefaultDescription
ToastProvidercomponent-Wrap the subtree; renders the viewport.
useToast().add({ title, description }) => void-Raise a toast.

Accessibility

  • Built on the Base UI Toast: a polite live region with timeout and swipe dismissal.
View site