Banner Alert

This is a Banner Alert component.

Installation

1. Dependencies

npm install clsx tailwind-merge

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 Banner Alert Code

Copy Banner Alert Code

BannerAlert Props

Name	Type	Required	Default	Description
isOpen	boolean	Yes	false	Controls whether the alert is visible.
onClose	() => void	No	undefined	Callback triggered when the alert is closed.
title	string	No	undefined	Title of the alert.
message	string	No	undefined	Message content of the alert.
variant	"success" \| "warning" \| "error" \| "info"	No	"info"	The variant of the alert.