primitives

Toaster

Top-level notification host (built on `sonner`). Mount `<Toaster />` once in the root layout, then call `toast()` / `toast.success()` / `toast.error()` from anywhere — purely imperative, no per-callsite provider gymnastics.

Use for confirmations after async actions (saved, deleted, copied), background-process completions, and recoverable errors. For destructive confirmations BEFORE an action use `<Dialog>` instead — toasts are notifications, not gates.

Install

Pull this component (and its dependencies) straight into your app via the shadcn CLI:

npx shadcn@latest add https://design.oapps.io/r/toaster.json

Or import from the workspace package:

import { Toaster, toast } from "@8maverik8/design";

Examples

Default / success / error / with action

All four shapes. Click each to fire — make sure `<Toaster />` is mounted in your root layout.

import { toast } from "@8maverik8/design";

toast("Saved", { description: "Changes synced." });
toast.success("Audience created", { description: "Spring 2026 launch is now live." });
toast.error("Could not save", { description: "Network error. Try again." });
toast("Project archived", {
  action: { label: "Undo", onClick: () => toast.success("Restored") },
});

Guidelines

Mount `<Toaster />` once at the root of your app (next to `<AppShell>`).
Provide an `action: { label, onClick }` on toasts that follow a destructive action — Undo is the standard.
Use a toast to confirm a destructive action BEFORE running it.Toasts auto-dismiss. A user can blink and miss the confirm — use Dialog.
Stack 3+ toasts in a row.If you need to surface multiple results, summarise them in one toast or in an Empty / banner state.