Alerts
A list of alerts components.
Alert - Basic
X UI
Use the CLI to install this!
Installation
npm install class-variance-authorityUsage
import { Alert, AlertTitle, AlertDescription } from "@/components/ui/alert";
export function MyComponent() {
return (
<Alert>
<AlertTitle>Heads up!</AlertTitle>
<AlertDescription>
You can add components to your app using the cli.
</AlertDescription>
</Alert>
);
}Props
| Component | Prop | Type | Default | Description |
|---|---|---|---|---|
Alert | variant | string | "default" | Alert variant style |
Alert | className | string | - | Additional CSS classes |
AlertTitle | className | string | - | Additional CSS classes |
AlertDescription | className | string | - | Additional CSS classes |
Variants
default- Standard alert styledestructive- Destructive alert style
Dependencies
This component requires the following packages:
class-variance-authority
Alert - Basic 02
Team Invitation
Kokonut invited you to join Design Team
Invited 5 minutes ago
Alert - Info
Saved to database
Alert - Fancy
Amazing milestone! 🎉
You've just hit 1,000 followers on your journey!
Milestone
Alert - Payment
Payment Received
$2,400.00The payment has been processed and added to your account
Alert - Glass
Black Friday Sale! 🎉
Get 50% off on all premium features. Limited time offer!
Alert - Classy
FREE TRIAL EXPIRED
Subscribe now to continue using our services.