Toast
A toast notification component.
"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/toastnpx shadcn@latest add @roiui/toast-tailwindanatomy
<ToastProvider>
<ToastPortal>
<ToastViewport>
<Toast>
<ToastTitle />
<ToastDescription />
<ToastClose />
</Toast>
</ToastViewport>
</ToastPortal>
</ToastProvider>