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

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

# AlertDescription

**Type**: component

AlertDescription - Detailed description text content for alerts The body content area of an alert that provides detailed information, context, or instructions related to the alert message. Automatically styled with muted text color and proper grid positioning. Supports rich content including paragraphs, links, and inline formatting. ## Features - Muted foreground color for visual hierarchy - Proper grid positioning (col-start-2) for icon layout compatibility - Support for multiple paragraphs with relaxed line height - Grid layout with start justification for text alignment - Semantic HTML structure with data-slot attribute - Small text size (text-sm) for readability - Responsive gap spacing between content elements

## JSX Usage

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

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

## Component Props

### className
- **Type**: `string`
- **Required**: No
- **Description**: No description available

### children
- **Type**: `React.ReactNode`
- **Required**: No
- **Description**: No description available

## Examples

### Example 1
```tsx
// Basic description with simple text
<Alert>
  <AlertTitle>Success</AlertTitle>
  <AlertDescription>
    Your account has been created successfully.
  </AlertDescription>
</Alert>
```
### Example 2
```tsx
// Description with multiple paragraphs
<Alert variant="destructive">
  <AlertCircle className="size-4" />
  <AlertTitle>Connection Error</AlertTitle>
  <AlertDescription>
    <p>Unable to connect to the server. This could be due to:</p>
    <p>• Network connectivity issues</p>
    <p>• Server maintenance</p>
    <p>Please try again in a few minutes.</p>
  </AlertDescription>
</Alert>
```
### Example 3
```tsx
// Description with links and rich content
<Alert>
  <Info className="size-4" />
  <AlertTitle>Update Available</AlertTitle>
  <AlertDescription>
    A new version is available. <a href="/changelog" className="underline">View changelog</a> or
    <button className="ml-1 underline">update now</button>.
  </AlertDescription>
</Alert>
```
### Example 4
```tsx
// Custom styled description
<Alert>
  <AlertTitle>Custom Alert</AlertTitle>
  <AlertDescription className="text-sm font-medium text-foreground">
    This description uses custom styling to override the default muted appearance.
  </AlertDescription>
</Alert>
```