---
category: overlays
---

# Dialog

Source: `components/ui/dialog.tsx`.

`Dialog` is a compound component. Its parts are exported **flat** (`DialogClose`, not
`Dialog.Close`) and each is a separate top-level export of the bundle:

| Part | Props |
| --- | --- |
| `DialogClose` | `React.ComponentProps<typeof DialogPrimitive.Close>` |
| `DialogContent` | `React.ComponentProps<typeof DialogPrimitive.Content> & {…}` |
| `DialogDescription` | `React.ComponentProps<typeof DialogPrimitive.Description>` |
| `DialogFooter` | `React.ComponentProps<'div'>` |
| `DialogHeader` | `React.ComponentProps<'div'>` |
| `DialogOverlay` | `React.ComponentProps<typeof DialogPrimitive.Overlay>` |
| `DialogPortal` | `React.ComponentProps<typeof DialogPrimitive.Portal>` |
| `DialogTitle` | `React.ComponentProps<typeof DialogPrimitive.Title>` |
| `DialogTrigger` | `React.ComponentProps<typeof DialogPrimitive.Trigger>` |

All parts accept `className` and are composed as children of `Dialog`.