Alert

import { CheckCircle2Icon } from "lucide-react";

import {
  Alert,
  AlertDescription,
  AlertTitle,

Installation

bunnpmpnpmyarn
$ pnpm dlx shadcn@latest add https://shadcn-cssinjs.vercel.app/r/alert.json
Copy

Usage

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

Copy<Alert>
  <TerminalIcon />
  <AlertTitle>Heads up!</AlertTitle>
  <AlertDescription>
    You can add components to your app using the CLI.
  </AlertDescription>
</Alert>

Composition

Use the following composition to build an Alert:

CopyAlert
├── AlertTitle
└── AlertDescription

Examples

Destructive

Use the destructive variant to indicate an error or a destructive action.

import { AlertCircleIcon } from "lucide-react";

import {
  Alert,
  AlertDescription,
  AlertTitle,

Action

Add an action to the AlertDescription to let the user respond.

import { RocketIcon } from "lucide-react";

import {
  Alert,
  AlertDescription,
  AlertTitle,

RTL

To enable right-to-left support, see the RTL guide.

"use client";

import { CheckCircle2Icon, InfoIcon } from "lucide-react";
import * as React from "react";

import { useTranslation } from "@/components/language-selector";

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.