> ## Documentation Index
> Fetch the complete documentation index at: https://elormui-mintlify-6ade9c4d.mintlify.site/llms.txt
> Use this file to discover all available pages before exploring further.

# Dialog

> A window overlaid on either the primary window or another dialog window.

export const ComponentPreview = ({component = "button", theme = "neutral", accent = "default", mode = "dark"}) => {
  const src = `${previewOrigin()}/preview/${component}?theme=${theme}&accent=${accent}&mode=${mode}`;
  return <Frame>
      <iframe src={src} title={`${component} preview`} style={{
    width: "100%",
    height: "280px",
    border: "none",
    borderRadius: "8px",
    background: "transparent"
  }} />
    </Frame>;
};

export const InstallCommand = ({command = "elorm add button"}) => {
  const managers = [{
    name: "npm",
    cmd: `npx ${command}`
  }, {
    name: "pnpm",
    cmd: `pnpm dlx ${command}`
  }, {
    name: "yarn",
    cmd: `yarn dlx ${command}`
  }, {
    name: "bun",
    cmd: `bunx ${command}`
  }];
  return <CodeGroup>
      {managers.map(({name, cmd}) => <pre key={name} data-language="bash" data-title={name}>
          <code>{cmd}</code>
        </pre>)}
    </CodeGroup>;
};

## Installation

<InstallCommand command="elorm add dialog" />

## Preview

<ComponentPreview component="dialog" />

## Usage

```tsx theme={null}
import { Dialog } from '@/components/ui/dialog'
```

A window overlaid on either the primary window or another dialog window.

## Examples

### Basic

<Tabs>
  <Tab title="Preview">
    <ComponentPreview component="dialog" />
  </Tab>

  <Tab title="Code">
    ```tsx theme={null}
    <Dialog>
      <DialogTrigger>Open</DialogTrigger>
      <DialogContent>
        <DialogHeader>
          <DialogTitle>Title</DialogTitle>
        </DialogHeader>
      </DialogContent>
    </Dialog>
    ```
  </Tab>
</Tabs>

## Usage notes

Always include DialogTitle for accessibility. Use DialogDescription for context.

## Avoid

* Do not omit DialogTitle
* Do not nest dialogs