Alert
A flexible alert component for displaying important messages with multiple variants and dark mode support
Installation
Install the Alert component using the nocta-ui CLI:
npx nocta-ui add alertThen import the components you need:
import {
Alert,
AlertTitle,
AlertDescription,
AlertIcon,
} from '@/components/ui/alert';Basic Usage
Default Alert
Information
This is a default alert with an information message.
Simple Alert
A simple alert without title or icon.
Variants
The Alert component supports four variants: default, destructive, warning, and success.
Default Alert
This is the default variant for general information.
Error
Something went wrong. Please try again later.
Warning
Please review your settings before proceeding.
Success
Your changes have been saved successfully.
Alert Without Icons
System Maintenance
We will be performing scheduled maintenance on Sunday at 2:00 AM UTC.
Account Suspended
Your account has been temporarily suspended. Contact support for assistance.
Usage Examples
Form Validation
Validation Error
Please fix the following errors:
- Email address is required
- Password must be at least 8 characters
Form Submitted
Thank you! Your form has been submitted successfully.
System Notifications
Storage Almost Full
You are using 95% of your storage quota. Consider upgrading your plan or deleting old files.
New Feature Available
Check out our new dashboard analytics feature in the Settings panel.
Customization
Custom Styling
The Alert component accepts a className prop for custom styling:
<Alert className="border-2 shadow-lg">
<AlertDescription>
Custom styled alert with enhanced border and shadow.
</AlertDescription>
</Alert>
<Alert className="max-w-md mx-auto">
<AlertTitle>Centered Alert</AlertTitle>
<AlertDescription>
This alert has a maximum width and is centered.
</AlertDescription>
</Alert>Props
Alert
| Prop | Type | Default | Description |
|---|---|---|---|
variant | 'default' | 'destructive' | 'warning' | 'success' | 'default' | Alert style variant |
className | string | '' | Additional CSS classes |
children | React.ReactNode | — | Alert content |
AlertTitle
| Prop | Type | Default | Description |
|---|---|---|---|
as | React.ElementType | 'h5' | HTML element to render |
className | string | '' | Additional CSS classes |
children | React.ReactNode | — | Title content |
AlertDescription
| Prop | Type | Default | Description |
|---|---|---|---|
className | string | '' | Additional CSS classes |
children | React.ReactNode | — | Description content |
AlertIcon
| Prop | Type | Default | Description |
|---|---|---|---|
className | string | '' | Additional CSS classes |
children | React.ReactNode | — | Icon content |
All components also accept their respective HTML element attributes.