║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║

---

title: Toast description: A customizable and responsive toast notification system.

<ComponentPreview name="toastaddtocart-demo" className="" description="Shows confirmation when product added to shopping cart." />

Installation

<Tabs defaultValue="cli" className="w-full"> <TabsList> <TabsTrigger value="cli">CLI</TabsTrigger> <TabsTrigger value="manual">Manual</TabsTrigger> </TabsList> <TabsContent value="cli"> <PkgOptions name="toast" /> </TabsContent> <TabsContent value="manual"> <Steps>

<Step>Install the following dependencies:</Step> <DepsOptions name="framer-motion" />

<Step>Copy and paste the following code into your project.</Step>

<p> <code>toast.tsx</code> </p> <ComponentSource name="toast" /> </Steps> </TabsContent> </Tabs>

Usage

//First, wrap your application with the ToastProvider:
import { ToastProvider } from "@/components/ui/toast";

function App() {
  return (
    <ToastProvider>
      <YourApp />
    </ToastProvider>
  );
}

import { useToast } from "@/components/ui/toast";

 return function MyComponent() {
  const { toast } = useToast();
  
  const showToast = () => {
    toast({
      title: "Success!",
      description: "Your action was completed successfully.",
      variant: "success",
    });
  }
 }

Examples

---

<Step>Default</Step>

<ComponentPreview name="toastdefault-demo" className="" description="Standard notification with neutral styling and tone." />

---

<Step>Warning</Step>

<ComponentPreview name="toastwarning-demo" className="" description="Alerts user to potential issues needing attention." />

---

<Step>Error</Step>

<ComponentPreview name="toasterror-demo" className="" description="Indicates action failure with prominent styling." />

---

<Step>Delete</Step>

<ComponentPreview name="toastdelete-demo" className="" description="Confirms removal of content with destructive tone." />

---

<Step>Info</Step>

<ComponentPreview name="toastinfo-demo" className="" description="Provides contextual information in a subtle way." />

---

<Step>Success</Step>

<ComponentPreview name="toastsuccess-demo" className="" description="" />

---

<Step>With Action</Step>

<ComponentPreview name="toastwithaction-demo" className="" description="" />

---

<Step>Persistent</Step>

<ComponentPreview name="toastpersistent-demo" className="" description="" />

---

<Step>Promise</Step>

<ComponentPreview name="toastpromise-demo" className="" description="" />

---

<Step>Rich Content</Step>

<ComponentPreview name="toastrichcontent-demo" className="" description="" />

---

<Step>Custom Duration</Step>

<ComponentPreview name="toastcustomduration-demo" className="" description="" />

---

<Step>Bulk Actions</Step>

<ComponentPreview name="toastbulkactions-demo" className="" description="" />

API Reference

toast

Triggers a toast notification.

Props

<PropsTable rows={[ { prop: "id", type: "string", default: "auto", description: "Unique identifier for the toast. Auto-generated if not provided." }, { prop: "title", type: "string", default: "—", description: "Main heading text of the toast." }, { prop: "description", type: "string", default: "—", description: "Optional descriptive message body." }, { prop: "variant", type: "default" | "success" | "destructive" | "warning" | "info" | "loading", default: "default", description: "Visual style of the toast. Affects colors and icon." }, { prop: "position", type: "top-right" | "top-left" | "bottom-right" | "bottom-left", default: "top-right", description: "Screen position where the toast appears." }, { prop: "duration", type: "number", default: "5000", description: "Auto-dismiss timeout in milliseconds. Use Infinity to disable auto-dismiss." }, { prop: "action", type: "ReactNode | { label: string; onClick: () => void }", default: "—", description: "Optional custom action element or config object with label and callback." }, { prop: "cancel", type: { label: string; onClick: () => void }, default: "—", description: "Optional cancel button with label and callback." }, { prop: "onClose", type: "() => void", default: "—", description: "Callback fired when the toast is closed or dismissed." }, { prop: "stackIndex", type: "number", default: "0", description: "Index of the toast in a stack (used internally for stacked animations)." }, { prop: "isVisible", type: "boolean", default: "true", description: "Controls the visibility of the toast." }, { prop: "isStacked", type: "boolean", default: "false", description: "Indicates if the toast is visually stacked with others." }, { prop: "isHovered", type: "boolean", default: "false", description: "Indicates if the stack is hovered (pauses auto-dismiss)." }, { prop: "stackDirection", type: "up" | "down", default: "down", description: "Direction in which stacked toasts collapse/expand." }, { prop: "isExiting", type: "boolean", default: "false", description: "Indicates if the toast is currently exiting (used for animation timing)." }, { prop: "totalCount", type: "number", default: "1", description: "Total number of toasts in the stack (used for '+N' badge)." } ]} />

║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║