Alert
Display important messages, notifications, and feedback to users with various severity levels and interactive features.
Basic Alerts
This is a default alert for general information.
This is an info alert for informational messages.
This is a success alert for positive confirmations.
This is a warning alert for caution messages.
This is an error alert for critical issues.
Alerts with Titles
Information
Your account has been successfully updated with the new settings.
Success
Your changes have been saved successfully and are now live.
Warning
Your subscription will expire in 3 days. Please renew to continue using our services.
Error
Failed to save changes. Please check your connection and try again.
Without Icons
Clean Information
This alert displays without an icon for a cleaner look.
Simple success message without any icon.
Dismissible Alerts
Dismissible Info
You can dismiss this alert by clicking the X button.
Dismissible Success
This success alert can be dismissed when no longer needed.
Dismissible Warning
Click the close button to dismiss this warning.
Dismissible Error
This error alert can be closed when the issue is resolved.
Rich Content
System Update Available
A new system update is available with the following improvements:
- Enhanced security features
- Performance optimizations
- Bug fixes and stability improvements
Action Required
Your payment method has been declined. Please update your billing information to continue using our services.
Title Only
Data saved successfully
Connection unstable
Access denied
Alert Component
tsx
1import { HTMLAttributes, ReactNode, ComponentType } from "react";2import { cn } from "@/lib/cn";3import {4 X,5 AlertCircle,6 CheckCircle,7 AlertTriangle,8 Info,9 LucideIcon,10} from "lucide-react";