Use alerts to display important messages or notifications to users with different severity levels.
npx micomponents-cli add alertimport { Alert, AlertTitle, AlertDescription } from "@/components/ui/alert";
import { InfoIcon } from "lucide-react";<Alert variant="info">
<InfoIcon className="h-4 w-4" />
<AlertTitle>Heads up!</AlertTitle>
<AlertDescription>
You can add components to your app using the cli.
</AlertDescription>
</Alert>Use different variant props to display different alert types: info, success, warning, error, or white.
Alerts are fully customizable with Tailwind CSS. Add custom className props or use AlertTitle and AlertDescription components.
| Prop | Type | Default | Description |
|---|---|---|---|
| variant | "info" | "success" | "warning" | "error" | "white" | info | The type/severity of the alert |
| className | string | - | Additional custom classes |