Alert
Alerts are the messengers of your application. They deliver important information, warnings, or confirmations with style and clarity.
Preview
Code
Basic Variants
Default Alert
This is a default alert with neutral styling.
Success!
Your changes have been saved successfully.
Warning
Please review your input before continuing.
Error
Something went wrong. Please try again.
Information
Here's some important information you should know.
Different Sizes
Small Alert
Compact alert with smaller padding.
Default Alert
Standard alert size.
Large Alert
Spacious alert with larger padding for important messages.
Dismissible Alerts
Task Completed
Your profile has been updated successfully.
Action Required
Please verify your email address to continue.
Connection Failed
Unable to connect to the server. Please check your internet connection.
Auto-hide Alerts
With Custom Icons
Custom Success Icon
This alert uses a custom icon instead of the default one.
Custom Warning Icon
Custom icons can help reinforce the message type.
Custom Error Icon
Error alerts with custom icons for better visual hierarchy.
Complex Alerts
Welcome to the Dashboard
Here's what's new in this update:
- Improved performance and loading times
- New interactive components
- Enhanced accessibility features
- Better mobile responsiveness
Installation
First, make sure you have the required dependencies:
npx @rajdevxd/aura-ui add alert
yarn @rajdevxd/aura-ui add alert
pnpm dlx @rajdevxd/aura-ui add alert
bunx --bun @rajdevxd/aura-ui add alert
Usage
Here's how to create informative alerts:
import { Alert, AlertTitle, AlertDescription } from "@/components/ui/alert"
const MyComponent = () => {
return (
<Alert variant="destructive">
<AlertTitle>Error</AlertTitle>
<AlertDescription>
Something went wrong. Please try again.
</AlertDescription>
</Alert>
)
}Props
Alert
| Prop | Type | Required | Description |
|---|---|---|---|
variant | "default" | "destructive" | No | The visual style variant of the alert |
className | string | No | Additional CSS classes for custom styling |
AlertTitle
| Prop | Type | Required | Description |
|---|---|---|---|
className | string | No | Additional CSS classes |
AlertDescription
| Prop | Type | Required | Description |
|---|---|---|---|
className | string | No | Additional CSS classes |
Features
- Two Variants: Default and destructive for different message types
- Icon Support: Easy to add icons for visual context
- Structured Content: Separate title and description areas
- Accessible: Proper ARIA roles and semantic markup
Common Issues
- "Alert not showing!" - Make sure you're providing content inside the Alert component
- "Colors not matching theme!" - Check your destructive color definitions
- "Icons not aligning!" - The component automatically handles icon positioning
Contributing
Alerts are crucial for user communication! Help us improve their styling and accessibility.
Alerts - because users deserve to know what's happening! 🚨