Toast

This is a Toast component.

Installation

1. Dependencies

npm install clsx tailwind-merge framer-motion

2. Paste inside @/lib/utils.ts

import { clsx } from "clsx";
import { twMerge } from "tailwind-merge";

export function cn(...inputs: Parameters<typeof clsx>) {
  return twMerge(clsx(...inputs));
}

3. Copy Toast Code

Copy Toast Code

Toast Props

Name	Type	Required	Default	Description
message	string	Yes	undefined	The message to display in the toast.
isOpen	boolean	Yes	undefined	Whether the toast is open or not.
onClose	() => void	Yes	undefined	Function to call when the toast is closed.
duration	number	No	3000	Duration in milliseconds before the toast closes automatically.
type	"success" \| "error" \| "info" \| "warning" \| "default"	No	"default"	Type of the toast (success, error, info, warning, default).
className	string	No	""	Additional class names for styling.