Alert

Displays a callout for user attention. Non-interactive, purely visual.

Installation

bash
npx shadcn@latest add alert

Import

import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert"import { Terminal, AlertCircle } from "lucide-react"

Default

<Alert>  <Terminal className="h-4 w-4" />  <AlertTitle>Heads up!</AlertTitle>  <AlertDescription>    You can add components and dependencies to your app using the CLI.  </AlertDescription></Alert>

Destructive

<Alert variant="destructive">  <AlertCircle className="h-4 w-4" />  <AlertTitle>Error</AlertTitle>  <AlertDescription>    Your session has expired. Please log in again.  </AlertDescription></Alert>

Without icon

<Alert>  <AlertTitle>Note</AlertTitle>  <AlertDescription>This component is part of RDS.</AlertDescription></Alert>

Props

PROPTYPEDEFAULTDESCRIPTION
variant"default" | "destructive""default"Visual style variant

All other props pass through to the underlying div.