Alert

Success! Your changes have been saved

This is an alert with icon, title and description.

This Alert has a title and an icon. No description.

Unable to process your payment.

Please verify your billing information and try again.

• Check your card details
• Ensure sufficient funds
• Verify billing address

---
import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert"
import { Icon } from "@/components/ui/icon"
---

<div class="grid w-full max-w-xl items-start gap-4">
  <Alert>
    <Icon name="check-circle-2" />
    <AlertTitle>Success! Your changes have been saved</AlertTitle>
    <AlertDescription>
      This is an alert with icon, title and description.
    </AlertDescription>
  </Alert>
  <Alert>
    <Icon name="popcorn" />
    <AlertTitle>
      This Alert has a title and an icon. No description.
    </AlertTitle>
  </Alert>
  <Alert variant="destructive">
    <Icon name="alert-circle" />
    <AlertTitle>Unable to process your payment.</AlertTitle>
    <AlertDescription>
      <p>Please verify your billing information and try again.</p>
      <ul class="list-inside list-disc text-sm">
        <li>Check your card details</li>
        <li>Ensure sufficient funds</li>
        <li>Verify billing address</li>
      </ul>
    </AlertDescription>
  </Alert>
</div>

Installation

To install the alert component, run the following command:

npx shadcn@latest add @fulldev/alert

Usage

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

<Alert variant="default">
  <Terminal />
  <AlertTitle>Heads up!</AlertTitle>
  <AlertDescription>
    You can add components and dependencies to your app using the cli.
  </AlertDescription>
</Alert>