Alert

Displays a callout for user attention.

Success! Your changes have been saved

This is an alert with an icon, a title, and a description.

Installation

pnpm dlx shadcn@latest add https://8bit.cnlibs.com/r/alert.json

Usage

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

<Alert className="w-full max-w-md">
  <CheckCircle2Icon />
  <AlertTitle>Success! Your changes have been saved</AlertTitle>
  <AlertDescription>
    This is an alert with an icon, a title, and a description.
  </AlertDescription>
</Alert>

Destructive

Use the destructive variant to signal an error.

Unable to process your payment.

Please verify your billing information and try again.