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

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

# Dialog

**Type**: component

Dialog - A modal dialog component for important content or actions A modal window overlay component built on Radix UI Dialog primitives that interrupts the user's workflow to capture their attention for important interactions. Dialogs render content in a layer above the main application with proper focus management and accessibility. Use dialogs for critical interactions, confirmations, forms, or detailed information that requires user focus and prevents interaction with the background content.

## JSX Usage

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

<Dialog
  open={true}
  defaultOpen={true}
  onOpenChange={handleOpenChange}
  modal={true}
>
  {/* Your content here */}
</Dialog>
```

## Component Props

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

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

### onOpenChange
- **Type**: `(open: boolean) => void`
- **Required**: No
- **Description**: No description available

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

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

## Examples

### Example 1
```tsx
// Basic confirmation dialog
<Dialog>
  <DialogTrigger asChild>
    <Button>Open Dialog</Button>
  </DialogTrigger>
  <DialogContent>
    <DialogHeader>
      <DialogTitle>Are you sure?</DialogTitle>
      <DialogDescription>
        This action cannot be undone.
      </DialogDescription>
    </DialogHeader>
    <DialogFooter>
      <Button variant="outline">Cancel</Button>
      <Button>Continue</Button>
    </DialogFooter>
  </DialogContent>
</Dialog>
```
### Example 2
```tsx
// Controlled dialog with form handling
const [open, setOpen] = useState(false);
<Dialog open={open} onOpenChange={setOpen}>
  <DialogTrigger asChild>
    <Button>Edit Profile</Button>
  </DialogTrigger>
  <DialogContent className="sm:max-w-[425px]">
    <DialogHeader>
      <DialogTitle>Edit profile</DialogTitle>
      <DialogDescription>
        Make changes to your profile here. Click save when you're done.
      </DialogDescription>
    </DialogHeader>
    <form onSubmit={handleSubmit}>
      <div className="grid gap-4 py-4">
        <Input label="Name" defaultValue="John Doe" />
        <Input label="Username" defaultValue="
### Example 3
```tsx
// Custom close behavior
<Dialog>
  <DialogTrigger asChild>
    <Button>Share Link</Button>
  </DialogTrigger>
  <DialogContent showCloseButton={false}>
    <DialogHeader>
      <DialogTitle>Share this link</DialogTitle>
    </DialogHeader>
    <div className="flex items-center space-x-2">
      <Input value="https://example.com" readOnly />
      <Button size="sm"><Copy className="h-4 w-4" /></Button>
    </div>
    <DialogFooter>
      <DialogClose asChild>
        <Button variant="secondary">Done</Button>
      </DialogClose>
    </DialogFooter>
  </DialogContent>
</Dialog>
```