Alert

<ComponentPreview name="alert-demo" styleName="radix-nova" previewClassName="h-auto sm:h-72 p-6" />

Installation

npx shadcn@latest add alert

<Step>Copy and paste the following code into your project.</Step>

<ComponentSource name="alert" title="components/ui/alert.tsx" styleName="radix-nova" />

<Step>Update the import paths to match your project setup.</Step>

Usage

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

<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.

<ComponentPreview name="alert-basic" styleName="radix-nova" previewClassName="h-auto sm:h-72 p-6" />

Destructive

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

<ComponentPreview name="alert-destructive" styleName="radix-nova" previewClassName="h-auto sm:h-72 p-6" />

Action

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

<ComponentPreview name="alert-action" styleName="radix-nova" previewClassName="h-auto sm:h-72 p-6" />

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.

<ComponentPreview name="alert-colors" styleName="radix-nova" previewClassName="h-auto sm:h-72 p-6" />

RTL

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

<ComponentPreview styleName="radix-nova" name="alert-rtl" direction="rtl" previewClassName="h-auto sm:h-72 p-6" />

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.