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

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

# AlertDialogContent

**Type**: component

Main content container for the alert dialog The primary container that holds all alert dialog content. Automatically includes the portal and overlay, and provides default styling with responsive design. Centered on screen with smooth fade and zoom animations. Manages focus trapping and keyboard navigation automatically.

## JSX Usage

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

<AlertDialogContent
  asChild={true}
  forceMount={true}
  onOpenAutoFocus={handleOpenAutoFocus}
  onCloseAutoFocus={handleCloseAutoFocus}
  onEscapeKeyDown={handleEscapeKeyDown}
  className="value"
/>
```

## Component Props

### asChild
- **Type**: `boolean`
- **Required**: No
- **Description**: Render as child element, merging props and behavior

### forceMount
- **Type**: `boolean`
- **Required**: No
- **Description**: Force mount the component even when dialog is closed

### onOpenAutoFocus
- **Type**: `(event: Event) => void`
- **Required**: No
- **Description**: Callback when dialog opens and focus moves to content

### onCloseAutoFocus
- **Type**: `(event: Event) => void`
- **Required**: No
- **Description**: Callback when dialog closes and focus returns to trigger

### onEscapeKeyDown
- **Type**: `(event: KeyboardEvent) => void`
- **Required**: No
- **Description**: Callback when Escape key is pressed (can preventDefault)

### className
- **Type**: `string`
- **Required**: No
- **Description**: Additional CSS classes for custom styling

## Examples

```tsx
// Basic usage
<AlertDialogContent>
  <AlertDialogHeader>
    <AlertDialogTitle>Confirm Action</AlertDialogTitle>
    <AlertDialogDescription>This action cannot be undone.</AlertDialogDescription>
  </AlertDialogHeader>
  <AlertDialogFooter>
    <AlertDialogCancel>Cancel</AlertDialogCancel>
    <AlertDialogAction>Continue</AlertDialogAction>
  </AlertDialogFooter>
</AlertDialogContent>
// Custom focus handling
<AlertDialogContent
  onOpenAutoFocus={(e) => {
    e.preventDefault();
    customFocusTarget.focus();
  }}
  onEscapeKeyDown={(e) => {
    if (hasUnsavedChanges) {
      e.preventDefault();
      showUnsavedWarning();
    }
  }}
>
  // content
</AlertDialogContent>
// Custom styling
<AlertDialogContent className="max-w-md">
  // smaller dialog
</AlertDialogContent>
```
/