Alert

Displays a callout for user attention with important and contextual information.

feedback
notification
message

Preview

Variants

Code

TSX
1
2
3
4
5
6
7
8
9
10
11
12
13
14
import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert"
import { Terminal } from "lucide-react"

export function AlertDemo() {
  return (
    <Alert>
      <Terminal className="h-4 w-4" />
      <AlertTitle>Heads up!</AlertTitle>
      <AlertDescription>
        You can add components to your app using the CLI.
      </AlertDescription>
    </Alert>
  )
}