Alert Components
Alert variants in shadcn/ui
Alert components display brief messages for user feedback.
Variants
alert Variants
live demoDefault
A standard informational alert.
Destructive
Something went wrong.
Info
Here is some info for you.
Usage
import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert"
import { Terminal } from "lucide-react"
;<Alert>
<Terminal className="h-4 w-4" />
<AlertTitle>Heads up!</AlertTitle>
<AlertDescription>
You can add components to your app using the CLI.
</AlertDescription>
</Alert>
{
/* Destructive variant */
}
;<Alert variant="destructive">
<TriangleAlert className="h-4 w-4" />
<AlertTitle>Error</AlertTitle>
<AlertDescription>
Your session has expired. Please log in again.
</AlertDescription>
</Alert>
Props
| Prop | Type | Default |
|---|---|---|
| variant | "default" | "destructive" | "default" |
| children | React.ReactNode | required |