# Dialog

Modal surfaces with three widths and nested overlays.

> For the complete documentation index, see [llms.txt](/llms.txt). Markdown variants are available by appending `.md` to any URL or sending an `Accept: text/markdown` header. An agent skill is available at [/.well-known/agent-skills/site-skill.md](/.well-known/agent-skills/site-skill.md).







## Preview [#preview]

### Sizes [#sizes]

<ComponentPreview src="examples/components/dialog.tsx">
  <DialogDemo />
</ComponentPreview>

### Nested overlays [#nested-overlays]

<ComponentPreview src="examples/components/dialog-nested.tsx">
  <DialogNestedDemo />
</ComponentPreview>

## Installation [#installation]

<CodeBlockCommand __npm__="`npx shadcn@latest add ${SITE.URL}/r/dialog.json`" __pnpm__="`pnpm dlx shadcn@latest add ${SITE.URL}/r/dialog.json`" __yarn__="`yarn dlx shadcn@latest add ${SITE.URL}/r/dialog.json`" __bun__="`bunx shadcn@latest add ${SITE.URL}/r/dialog.json`" />

## Usage [#usage]

```tsx
import { Button } from "@/components/ui/button";
import {
  Dialog,
  DialogTrigger,
  DialogContent,
  DialogTitle,
  DialogDescription,
} from "@/components/ui/dialog";

<Dialog>
  <DialogTrigger render={<Button />}>Open settings</DialogTrigger>
  <DialogContent size="small">
    <DialogTitle>Settings</DialogTitle>
    <DialogDescription>Manage your preferences.</DialogDescription>
  </DialogContent>
</Dialog>;
```

## API Reference [#api-reference]

Root exposes Base UI Dialog state and dismissal props; existing `sounds` remains supported. Content `size`: small (400px), default (540px), large (880px), narrowed to 360/480/800px in compact density. Content is constrained to the viewport and scrolls when needed. `showCloseButton` defaults to true. Header, Footer, Title, Description, Close, Overlay and Portal are exported. Include a Title. The nested overlays example includes Select, DropdownMenu and Tooltip for nested surface and focus testing.