<!-- source-hash: 658b99c6617a2e2c02da90f0de25e855 -->
A reusable React Alert component system with customizable variants and structured content sections for displaying notifications and status messages.

## Key Components

- **Alert**: Main container component with variant-based styling (default, destructive)
- **AlertTitle**: Header component for alert titles with consistent typography
- **AlertDescription**: Content wrapper for alert body text with optimized line spacing
- **alertVariants**: CVA configuration defining visual styles and behavior for different alert types

## Usage Example

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

// Basic alert
<Alert>
  <AlertTitle>Heads up!</AlertTitle>
  <AlertDescription>
    You can add components to your app using the cli.
  </AlertDescription>
</Alert>

// Destructive alert with icon
<Alert variant="destructive">
  <AlertTriangle className="h-4 w-4" />
  <AlertTitle>Error</AlertTitle>
  <AlertDescription>
    Your session has expired. Please log in again.
  </AlertDescription>
</Alert>

// Success alert (using default variant with custom styling)
<Alert className="border-green-200 bg-green-50">
  <CheckCircle className="h-4 w-4 text-green-600" />
  <AlertTitle>Success</AlertTitle>
  <AlertDescription>
    Your changes have been saved successfully.
  </AlertDescription>
</Alert>
```

The component automatically positions SVG icons and maintains proper spacing between elements using CSS selectors. All components are built with `forwardRef` for proper ref handling and include semantic HTML with appropriate ARIA roles.