# Alert

Displays a callout for user attention.

> For the complete documentation index, see [llms.txt](/llms.txt). Markdown variants are available by appending `.md` to any URL or sending an `Accept: text/markdown` header. An agent skill is available at [/.well-known/agent-skills/site-skill.md](/.well-known/agent-skills/site-skill.md).





<ComponentPreview name="alert-demo">
  <AlertDemo />
</ComponentPreview>

## Installation [#installation]

<Tabs defaultValue="cli">
  <TabsList>
    <TabsTrigger value="cli">
      CLI
    </TabsTrigger>

    <TabsTrigger value="manual">
      Manual
    </TabsTrigger>
  </TabsList>

  <TabsContent value="cli">
    ```bash
    npx shadcn@latest add https://shadcn-cssinjs.com/r/alert.json
    ```
  </TabsContent>

  <TabsContent value="manual">
    <Steps>
      <Step>
        Install the following dependencies:
      </Step>

      ```bash
      pnpm add @stylexjs/stylex
      ```

      <Step>
        Make sure [StyleX is configured](/docs/installation) and the design tokens are
        installed.
      </Step>

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

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

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

## Usage [#usage]

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

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

## Composition [#composition]

Use the following composition to build an `Alert`:

```txt
Alert
├── AlertTitle
└── AlertDescription
```

## Examples [#examples]



### Basic [#basic]

A simple alert with an icon, title, and description.

<ComponentPreview name="alert-basic">
  <AlertBasic />
</ComponentPreview>

### Destructive [#destructive]

Use the `destructive` variant to indicate an error or a destructive action.

<ComponentPreview name="alert-destructive">
  <AlertDestructive />
</ComponentPreview>

### Action [#action]

Add an action to the `AlertDescription` to let the user respond.

<ComponentPreview name="alert-action">
  <AlertAction />
</ComponentPreview>

### Custom Colors [#custom-colors]

Use utility classes to apply custom colors to the alert.

<ComponentPreview name="alert-colors">
  <AlertColors />
</ComponentPreview>



## RTL [#rtl]

To enable right-to-left support, see the [RTL guide](/docs/rtl).

<ComponentPreview name="alert-rtl" direction="rtl">
  <AlertRtl />
</ComponentPreview>

## API Reference [#api-reference]

### Alert [#alert]

The `Alert` component displays a callout for user attention.

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

### AlertTitle [#alerttitle]

The `AlertTitle` component displays the title of the alert.

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

### AlertDescription [#alertdescription]

The `AlertDescription` component displays the description or content of the alert.

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