Toast
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- 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.