@neynar/ui/llm-docs/alert.llm.md

React UI component library built on shadcn/ui and Tailwind CSS

# Alert

**Type**: component

Alert - Display important messages and notifications to users A flexible alert component for displaying important messages, notifications, and status updates. Built with shadcn/ui design patterns and Tailwind CSS. Alerts are used to communicate critical information that requires user attention and potentially action. ## When to use - System-wide notifications and announcements - Form validation errors and success messages - Important warnings that need persistent visibility - Status updates that don't require immediate action - Progress indicators and completion messages ## Features - Two built-in variants: `default` and `destructive` - Automatic icon grid layout with proper spacing using CSS Grid - Semantic HTML with proper ARIA attributes (`role="alert"`) - Responsive design with consistent spacing - Dark mode support via CSS custom properties - Composition pattern with AlertTitle and AlertDescription - Support for custom styling through className prop - Icon-aware layout that adapts to presence of SVG icons ## Design Philosophy Follows the shadcn/ui principle of providing unstyled, accessible components that can be easily customized. The alert uses CSS Grid for intelligent layout that automatically adjusts based on whether an icon is present.

## JSX Usage

```jsx
import { Alert } from '@neynar/ui';

<Alert
  variant={value}
  className="value"
>
  {/* Your content here */}
</Alert>
```

## Component Props

### variant
- **Type**: `"default" | "destructive"`
- **Required**: No
- **Description**: Visual style variant determining colors and emphasis

### className
- **Type**: `string`
- **Required**: No
- **Description**: Additional CSS classes to merge with default styles

### children
- **Type**: `React.ReactNode`
- **Required**: No
- **Description**: Alert content including optional icon, title, and description

## Examples

### Example 1
```tsx
// Basic informational alert
<Alert>
  <Info className="size-4" />
  <AlertTitle>Heads up!</AlertTitle>
  <AlertDescription>
    You can add components to your app using the cli.
  </AlertDescription>
</Alert>
```
### Example 2
```tsx
// Destructive error alert
import { AlertCircle } from "lucide-react";
<Alert variant="destructive">
  <AlertCircle className="size-4" />
  <AlertTitle>Error</AlertTitle>
  <AlertDescription>
    Your session has expired. Please log in again.
  </AlertDescription>
</Alert>
```
### Example 3
```tsx
// Custom styled success alert
<Alert className="border-green-200 bg-green-50 text-green-800 dark:border-green-800 dark:bg-green-950 dark:text-green-200">
  <CheckCircle className="size-4" />
  <AlertTitle>Success</AlertTitle>
  <AlertDescription>
    Your changes have been saved successfully.
  </AlertDescription>
</Alert>
```
### Example 4
```tsx
// Alert without icon
<Alert>
  <AlertTitle>Simple Notice</AlertTitle>
  <AlertDescription>
    This alert doesn't use an icon.
  </AlertDescription>
</Alert>
```
### Example 5
```tsx
// Alert with only description
<Alert variant="destructive">
  <AlertCircle className="size-4" />
  <AlertDescription>
    Something went wrong. Please try again.
  </AlertDescription>
</Alert>
```