Toast

A toast displays a brief, temporary notification.

Installation

npx shadcn@latest add @dotui/toast

Usage

import { ToastProvider, toastManager } from "@/components/ui/toast";
<ToastProvider />;

toastManager.add({
	title: "Your message has been sent.",
});

toastManager.add({
	title: "Changes saved",
	description: "Your update is live.",
	type: "success",
});

Examples

No examples yet.

API Reference

PropType
Omit<DetailedHTMLProps<ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref">
ToastData
ToastManagerPositionerProps
"high" | "low"
number
ReactNode
"ending" | "starting"
string

Last updated on 6/4/2026