Toast

Shows a short message that disappears on its own.

DocsAPI Reference
"use client";

import { Button } from "@/components/ui/button/button";
import { ToastProvider, toastManager } from "@/components/ui/toast/toast";

export default function ToastDemo() {
  return (
    <ToastProvider>
      <ToastButton />
    </ToastProvider>
  );
}

function ToastButton() {
  function createToast() {
    toastManager.add({
      title: "Success!",
      description: "Your changes have been saved successfully.",
      type: "success",
    });
  }

  return <Button onClick={createToast}>Show Toast</Button>;
}


npx shadcn@latest add @roiui/toast
npx shadcn@latest add @roiui/toast-tailwind

anatomy
<ToastProvider>
  <ToastPortal>
      <ToastViewport>
          <Toast>
              <ToastTitle />
              <ToastDescription />
              <ToastClose />
          </Toast>
      </ToastViewport>
  </ToastPortal>
</ToastProvider>