/
1.1k
Sponsor

Toast

PreviousNext

Auto-dismissing toast notification

InkOpenTUI
Terminal

Installation

$ pnpm dlx shadcn@latest add @termcn/opentui/toast

Usage

import { Toast } from "@/components/ui/toast";
<Toast
  variant="success"
  message="Settings saved successfully."
  duration={5000}
  onDismiss={() => console.log("toast closed")}
/>

Examples

Error with Longer Duration

Terminal
import { Toast } from "@/components/ui/toast";

export function ToastError() {
  return (
    <Toast
      variant="error"
      message="Deploy failed. Check logs."
      duration={8000}
    />
  );
}

API Reference

Toast

PropTypeDefault
messagestringrequired
variant"success" | "error" | "warning" | "info""info"
durationnumber3000
onDismiss() => void-
iconstring-