---
title: Alert
description: A callout for displaying important information.
---

<ComponentPreview name="p-alert-1" />

## Installation

<CodeTabs>

<TabsList>
  <TabsTab value="cli">CLI</TabsTab>
  <TabsTab value="manual">Manual</TabsTab>
</TabsList>
<TabsPanel value="cli">

```bash
npx shadcn@latest add @coss/alert
```

</TabsPanel>

<TabsPanel value="manual">

<Steps>

<Step>Import the following variables into your CSS file</Step>

```css
@theme inline {
  --color-destructive-foreground: var(--destructive-foreground);
  --color-info: var(--info);
  --color-info-foreground: var(--info-foreground);
  --color-success: var(--success);
  --color-success-foreground: var(--success-foreground);
  --color-warning: var(--warning);
  --color-warning-foreground: var(--warning-foreground);
}

:root {
  --destructive-foreground: var(--color-red-400);
  --info: var(--color-blue-500);
  --info-foreground: var(--color-blue-700);
  --success: var(--color-emerald-500);
  --success-foreground: var(--color-emerald-700);
  --warning: var(--color-amber-500);
  --warning-foreground: var(--color-amber-700);
}

.dark {
  --destructive-foreground: var(--color-red-400);
  --info: var(--color-blue-500);
  --info-foreground: var(--color-blue-400);
  --success: var(--color-emerald-500);
  --success-foreground: var(--color-emerald-400);
  --warning: var(--color-amber-500);
  --warning-foreground: var(--color-amber-400);
}
```

<Step>Copy and paste the following code into your project.</Step>

<ComponentSource name="alert" title="components/ui/alert.tsx" />

<Step>Update the import paths to match your project setup.</Step>

</Steps>

</TabsPanel>

</CodeTabs>

## Usage

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

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

## API Reference

This is a custom component, not a Base UI wrapper.

### Alert

Root container for the alert.

| Prop      | Type                                                        | Default     | Description                                      |
| --------- | ----------------------------------------------------------- | ----------- | ------------------------------------------------ |
| `variant` | `"default" \| "error" \| "info" \| "success" \| "warning"` | `"default"` | Controls the alert styling and color scheme      |

### AlertTitle

Title text for the alert. Renders as a styled `div`.

### AlertDescription

Description text for the alert. Renders as a styled `div` with muted foreground color.

### AlertAction

Container for action buttons. Automatically positions to the right on larger screens.

## Examples

### With Icon

<ComponentPreview name="p-alert-2" />

### With Icon and Action Buttons

<ComponentPreview name="p-alert-3" />

### Info Alert

<ComponentPreview name="p-alert-4" />

### Success Alert

<ComponentPreview name="p-alert-5" />

### Warning Alert

<ComponentPreview name="p-alert-6" />

### Error Alert

<ComponentPreview name="p-alert-7" />