> ## Documentation Index
> Fetch the complete documentation index at: https://mintlify.com/shadcn-ui/ui/llms.txt
> Use this file to discover all available pages before exploring further.

# Alert

> Displays a callout for user attention.

## Installation

<CodeGroup>
  ```bash npm theme={null}
  npx shadcn@latest add alert
  ```

  ```bash yarn theme={null}
  yarn dlx shadcn@latest add alert
  ```

  ```bash pnpm theme={null}
  pnpm dlx shadcn@latest add alert
  ```
</CodeGroup>

## Usage

```tsx theme={null}
import {
  Alert,
  AlertTitle,
  AlertDescription,
} from "@/components/ui/alert"
```

```tsx theme={null}
<Alert>
  <InfoIcon />
  <AlertTitle>Heads up!</AlertTitle>
  <AlertDescription>
    You can add components and dependencies to your app using the cli.
  </AlertDescription>
</Alert>
```

## Component Code

```tsx theme={null}
import * as React from "react"
import { cva, type VariantProps } from "class-variance-authority"

import { cn } from "@/lib/utils"

const alertVariants = cva(
  "relative grid w-full grid-cols-[0_1fr] items-start gap-y-0.5 rounded-lg border px-4 py-3 text-sm has-[>svg]:grid-cols-[calc(var(--spacing)*4)_1fr] has-[>svg]:gap-x-3 [&>svg]:size-4 [&>svg]:translate-y-0.5 [&>svg]:text-current",
  {
    variants: {
      variant: {
        default: "bg-card text-card-foreground",
        destructive:
          "bg-card text-destructive *:data-[slot=alert-description]:text-destructive/90 [&>svg]:text-current",
      },
    },
    defaultVariants: {
      variant: "default",
    },
  }
)

function Alert({
  className,
  variant,
  ...props
}: React.ComponentProps<"div"> & VariantProps<typeof alertVariants>) {
  return (
    <div
      data-slot="alert"
      role="alert"
      className={cn(alertVariants({ variant }), className)}
      {...props}
    />
  )
}

function AlertTitle({ className, ...props }: React.ComponentProps<"div">) {
  return (
    <div
      data-slot="alert-title"
      className={cn(
        "col-start-2 line-clamp-1 min-h-4 font-medium tracking-tight",
        className
      )}
      {...props}
    />
  )
}

function AlertDescription({
  className,
  ...props
}: React.ComponentProps<"div">) {
  return (
    <div
      data-slot="alert-description"
      className={cn(
        "col-start-2 grid justify-items-start gap-1 text-sm text-muted-foreground [&_p]:leading-relaxed",
        className
      )}
      {...props}
    />
  )
}

export { Alert, AlertTitle, AlertDescription }
```

## Examples

<Tabs>
  <Tab title="Basic">
    A basic alert with an icon, title and description.

    ```tsx theme={null}
    <Alert>
      <InfoIcon />
      <AlertTitle>Heads up!</AlertTitle>
      <AlertDescription>
        You can add components and dependencies to your app using the cli.
      </AlertDescription>
    </Alert>
    ```
  </Tab>

  <Tab title="Destructive">
    Use `variant="destructive"` to create a destructive alert.

    ```tsx theme={null}
    <Alert variant="destructive">
      <AlertTriangleIcon />
      <AlertTitle>Error</AlertTitle>
      <AlertDescription>
        Your session has expired. Please log in again.
      </AlertDescription>
    </Alert>
    ```
  </Tab>

  <Tab title="Custom Colors">
    You can customize the alert colors by adding custom classes.

    ```tsx theme={null}
    <Alert className="bg-amber-50 dark:bg-amber-950">
      <AlertTitle>Warning</AlertTitle>
      <AlertDescription>
        This action requires additional confirmation.
      </AlertDescription>
    </Alert>
    ```
  </Tab>
</Tabs>

## Variants

The Alert component supports two variants:

* `default` - Standard alert with default background
* `destructive` - Alert for error or destructive actions

## API Reference

### Alert

| Prop        | Type                         | Default     |
| ----------- | ---------------------------- | ----------- |
| `variant`   | `"default" \| "destructive"` | `"default"` |
| `className` | `string`                     | -           |

### AlertTitle

| Prop        | Type     | Default |
| ----------- | -------- | ------- |
| `className` | `string` | -       |

### AlertDescription

| Prop        | Type     | Default |
| ----------- | -------- | ------- |
| `className` | `string` | -       |