---
title: "Dialog"
id: "dialog"
description: "A Dialog is a modal window overlaid on all other elements."
headOnly: true
---

## Overview

```tsx
import { Dialog } from "@camome/core";

export default function Default() {
  return (
    <Dialog>
      <Dialog.Backdrop />
      <Dialog.PanelWrapper>
        <Dialog.Panel>
          <Dialog.Close />
          <Dialog.Title>This is a title</Dialog.Title>
          <Dialog.Content>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
            eiusmod tempor incididunt ut labore et.
          </Dialog.Content>
        </Dialog.Panel>
      </Dialog.PanelWrapper>
    </Dialog>
  );
}
```

## Usage with Headless UI

import WithHeadlessUI from "@/demo/Dialog/WithHeadlessUI";

<CodeSandbox {...WithHeadlessUI} />
