<!-- source-hash: 21f8f556d2e1ca40eec923e09ea30a57 -->
A React component library providing customizable alert components with support for icons, titles, descriptions, and variant-based styling using class-variance-authority.

## Key Components

- **Alert** - Main alert container with variant support (default, destructive)
- **AlertTitle** - Styled heading component for alert titles
- **AlertDescription** - Content container for alert descriptions
- **alertVariants** - CVA configuration defining alert styling variants

## Usage Example

```typescript
import { Alert, AlertTitle, AlertDescription } from "./alert"
import { AlertTriangle } from "lucide-react"

// Basic alert
<Alert>
  <AlertTitle>Heads up!</AlertTitle>
  <AlertDescription>
    This is a basic alert message.
  </AlertDescription>
</Alert>

// Destructive alert with icon
<Alert variant="destructive">
  <AlertTriangle className="h-4 w-4" />
  <AlertTitle>Error</AlertTitle>
  <AlertDescription>
    Something went wrong. Please try again.
  </AlertDescription>
</Alert>

// Custom styling
<Alert className="border-blue-200 bg-blue-50">
  <AlertTitle>Custom Alert</AlertTitle>
  <AlertDescription>
    Alert with custom styling applied.
  </AlertDescription>
</Alert>
```

The components use semantic HTML with proper ARIA roles and support icons positioned absolutely in the top-left corner with automatic content spacing.