5Sponsor

Toast

Auto-dismissing toast notification

Terminal

Installation

pnpm dlx shadcn@latest add @termcn/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 "@/registry/bases/ink/ui/toast";

export default 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() => voidundefined
iconstringundefined