Alert

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

Installation

pnpmnpmyarnbun
pnpm dlx shadcn@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.

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

Destructive

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

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

Action

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

import {
  Alert,
  AlertAction,

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.

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

RTL

To enable RTL support in shadcn/ui, see the RTL configuration guide.

"use client"

import * as React from "react"

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.