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

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

# DialogContent

**Type**: component

DialogContent - The main content container for the dialog The primary container for dialog content that automatically includes the overlay and portal. Provides the visual dialog box with animations, positioning, and focus management. Includes a close button (X) by default which can be hidden using the showCloseButton prop.

## JSX Usage

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

<DialogContent
  asChild={true}
  forceMount={true}
  onOpenAutoFocus={handleOpenAutoFocus}
  onCloseAutoFocus={handleCloseAutoFocus}
  onEscapeKeyDown={handleEscapeKeyDown}
  onPointerDownOutside={handlePointerDownOutside}
  onInteractOutside={handleInteractOutside}
  showCloseButton={true}
  className="value"
>
  {/* Your content here */}
</DialogContent>
```

## Component Props

### asChild
- **Type**: `boolean`
- **Required**: No
- **Description**: No description available

### forceMount
- **Type**: `boolean`
- **Required**: No
- **Description**: No description available

### onOpenAutoFocus
- **Type**: `(event: Event) => void`
- **Required**: No
- **Description**: No description available

### onCloseAutoFocus
- **Type**: `(event: Event) => void`
- **Required**: No
- **Description**: No description available

### onEscapeKeyDown
- **Type**: `(event: KeyboardEvent) => void`
- **Required**: No
- **Description**: No description available

### onPointerDownOutside
- **Type**: `(event: PointerEvent) => void`
- **Required**: No
- **Description**: No description available

### onInteractOutside
- **Type**: `(
    event: React.FocusEvent | MouseEvent | TouchEvent,
  ) => void`
- **Required**: No
- **Description**: No description available

### showCloseButton
- **Type**: `boolean`
- **Required**: No
- **Description**: Whether to show the X close button in top-right corner (default: true)

### className
- **Type**: `string`
- **Required**: No
- **Description**: Additional CSS classes to apply to the content container

### children
- **Type**: `React.ReactNode`
- **Required**: No
- **Description**: Dialog content including header, body, and footer elements

## Examples

### Example 1
```tsx
// Standard content with header and footer
<DialogContent>
  <DialogHeader>
    <DialogTitle>Dialog Title</DialogTitle>
    <DialogDescription>
      Detailed description of the dialog's purpose
    </DialogDescription>
  </DialogHeader>
  <div className="py-4">
    Main dialog content goes here
  </div>
  <DialogFooter>
    <Button variant="outline">Cancel</Button>
    <Button>Confirm</Button>
  </DialogFooter>
</DialogContent>
```
### Example 2
```tsx
// Custom sizing and scrollable content
<DialogContent className="sm:max-w-[425px] max-h-[80vh] overflow-y-auto">
  <DialogHeader>
    <DialogTitle>Long Content</DialogTitle>
  </DialogHeader>
  <div className="space-y-4">
    // Long scrollable content
  </div>
</DialogContent>
```
### Example 3
```tsx
// Without default close button
<DialogContent showCloseButton={false}>
  <DialogHeader>
    <DialogTitle>Custom Close</DialogTitle>
  </DialogHeader>
  <div>Content without X button</div>
  <DialogFooter>
    <DialogClose asChild>
      <Button>Close</Button>
    </DialogClose>
  </DialogFooter>
</DialogContent>
```