alert

Displays a callout for user attention.

Preview
Code

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

Installation

Usage

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

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

<Alert>
  <Terminal className="h-4 w-4" />
  <AlertTitle>Heads up!</AlertTitle>
  <AlertDescription>
    You can add components and dependencies to your app using the cli.
  </AlertDescription>
</Alert>

<Alert>
  <Terminal className="h-4 w-4" />
  <AlertTitle>Heads up!</AlertTitle>
  <AlertDescription>
    You can add components and dependencies to your app using the cli.
  </AlertDescription>
</Alert>

API Reference

Alert

variant (VariantProps<typeof alertVariants>['variant'], optional): Visual style variant for the alert.
className (string, optional): Additional class names to apply.
...props (React.ComponentProps<'div'>): Native div element props.

AlertTitle

className (string, optional): Additional class names to apply.
...props (React.ComponentProps<'div'>): Native div element props.

AlertDescription

className (string, optional): Additional class names to apply.
...props (React.ComponentProps<'div'>): Native div element props.

Accordion Alert Dialog