Alert
Ready
Alert banners for important messages and notifications
Alert Variants
AI, success, error, warning, and info alerts
AI Insight
Based on your usage patterns, you prefer denser layouts during morning hours. Auto-adjustment is enabled.
Information
This is an info alert with informational content.
Success
Your changes have been saved successfully.
Error
There was an error processing your request. Please try again.
Warning
Your session will expire in 5 minutes. Please save your work.
Alert without Title
Simple alerts with description only
You have 3 unread messages in your inbox.
File uploaded successfully.
Dismissible Alerts
Alerts with close button
New Update Available
Version 2.0 is now available. Click here to update.
Your trial expires in 3 days. Upgrade now to continue using premium features.
Installation
No additional dependencies required
Alert component uses only Tailwind CSS - no external dependencies needed.
Usage
Basic implementation example
import { Alert, AlertDescription, AlertTitle } from '@/components/ui/alert'
import { CheckCircle2 } from 'lucide-react'
export default function Example() {
return (
<Alert variant="success">
<CheckCircle2 className="h-4 w-4" />
<AlertTitle>Success</AlertTitle>
<AlertDescription>
Your changes have been saved.
</AlertDescription>
</Alert>
)
}Props
Alert component props
| Prop | Type | Default | Description |
|---|---|---|---|
| variant | 'default' | 'ai' | 'info' | 'success' | 'error' | 'warning' | 'default' | Alert variant style |
| className | string | - | Additional CSS classes |
Features
Built-in functionality
- 6 variants - AI, default, info, success, error, warning
- AI variant - Gradient background with Lightbulb icon
- Icon support - Default semantic icons or custom icons
- Dismissible - Optional close button with onClose handler
- Flexible content - Title and/or description
- Accessible - Semantic HTML with ARIA roles
- Dark mode - Full dark mode support
- 8px border radius - Consistent with Eidetic design