Alert
Displays a callout for user attention.
Heads up!
You can add components to your app using the cli.
Installation
npx shadcn@latest add alertUsage
1
2
3
4
5
6
7
8
9
10
11
12
13
14
import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert"
import { InfoIcon } from "lucide-react"
export function AlertDemo() {
return (
<Alert>
<InfoIcon className="h-4 w-4" />
<AlertTitle>Heads up!</AlertTitle>
<AlertDescription>
You can add components to your app using the cli.
</AlertDescription>
</Alert>
)
}Examples
Destructive
Error
Your session has expired. Please log in again.
Props
| Component | Props | Description |
|---|---|---|
| Alert | HTMLDivElement & VariantProps variant?: "default" | "destructive" | The alert container that provides context and styling. |
| AlertTitle | HTMLHeadingElement | The title displayed at the top of the alert. |
| AlertDescription | HTMLParagraphElement | The description providing more detail about the alert. |