Alert

Component alert-demo not found in registry.

Installation

pnpmnpmyarnbun
pnpm dlx createui@latest add alert
Copy

Usage

Copyimport {
  Alert,
  AlertAction,
  AlertDescription,
  AlertTitle,
} from "@/components/ui/alert"

Copy<Alert>
  <InfoIcon />
  <AlertTitle>Heads up!</AlertTitle>
  <AlertDescription>
    You can add components and dependencies to your app using the cli.
  </AlertDescription>
  <AlertAction>
    <Button variant="outline">Enable</Button>
  </AlertAction>
</Alert>

Examples

Basic

A basic alert with an icon, title and description.

Component alert-basic not found in registry.

Destructive

Use variant="destructive" to create a destructive alert.

Component alert-destructive not found in registry.

Action

Use AlertAction to add a button or other action element to the alert.

Component alert-action not found in registry.

Custom Colors

You can customize the alert colors by adding custom classes such as bg-amber-50 dark:bg-amber-950 to the Alert component.

Component alert-colors not found in registry.

API Reference

Alert

The Alert component displays a callout for user attention.

AlertTitle

The AlertTitle component displays the title of the alert.

AlertDescription

The AlertDescription component displays the description or content of the alert.

AlertAction

The AlertAction component displays an action element (like a button) positioned absolutely in the top-right corner of the alert.