Toast

toastOverlays

A brief message about something that just happened, raised from anywhere with toast.add. Mount one Toaster beside the app's content; this site already has one.

bunx --bun shadcn@4.17.0 add @waimakers/toast
Kit dependencies
utilsthemebutton
npm dependencies
@base-ui/react@1.9.0lucide-react@1.33.0

From the registry

shadcn's Base UI toast, restyled to the brand. Mount one <Toaster /> as a SIBLING of the app's content and raise a toast from anywhere with toast.add({ title, description }) — the manager is created at module scope, so a handler needs no hook and no provider in scope. The five status types (success, info, warning, error, loading) are DROPPED, as the button link variant was: the brand's one attention colour is orange, orange is never text on the light ground, and a coloured status ladder cannot be rendered honestly on these tokens. Base UI's type still reaches the DOM as data-type, so a future status has a seam. Raised surface with the kit radius, the overlay shadow and a themed hairline; entrance, stack transform and swipe all collapse under motion-reduce; the viewport sits above the popover layer, because a toast is often raised BY something inside an open overlay.

Examples

Basic

A title and an optional line of detail. It dismisses itself after a few seconds.

With an action

One action, such as Undo, sits beside the message.

Pending then done

toast.promise shows loading, then success or failure, in the same toast.

Failure

A high priority toast is announced at once. Say what failed and what the reader can do.