Toasts

1// app/layout.tsx — mount the stack once
2import { Toaster } from "@/components/ui/toast";
3
4export default function RootLayout({ children }: { children: React.ReactNode }) {
5  return (
6    <html lang="en">
7      <body>
8        {children}
9        <Toaster />
10      </body>
11    </html>
12  );
13}
14
15// anywhere in a client component
16import { toast } from "@/components/ui/toast";
17
18async function publish() {
19  const id = toast({ tone: "loading", title: "Publishing" });
20  await fetch("/api/publish", { method: "POST" });
21  toast({ id, tone: "success", title: "Published", description: "Your page is live." });
22}