---
title: Dialog
description: A popup that opens on top of the entire page.

links:
  doc: https://base-ui.com/react/components/dialog#api-reference
---

<ComponentPreview name="p-dialog-1" />

## Installation

<CodeTabs>

<TabsList>
  <TabsTab value="cli">CLI</TabsTab>
  <TabsTab value="manual">Manual</TabsTab>
</TabsList>
<TabsPanel value="cli">

```bash
npx shadcn@latest add @coss/dialog
```

</TabsPanel>

<TabsPanel value="manual">

<Steps>

<Step>Install the following dependencies:</Step>

```bash
npm install @base-ui/react
```

<Step>Copy and paste the following code into your project.</Step>

<ComponentSource name="dialog" title="components/ui/dialog.tsx" />

<Step>Update the import paths to match your project setup.</Step>

</Steps>

</TabsPanel>

</CodeTabs>

## Usage

```tsx
import {
  Dialog,
  DialogClose,
  DialogDescription,
  DialogPanel,
  DialogFooter,
  DialogHeader,
  DialogPopup,
  DialogTitle,
  DialogTrigger,
} from "@/components/ui/dialog"
```

```tsx
<Dialog>
  <DialogTrigger>Open Dialog</DialogTrigger>
  <DialogPopup>
    <DialogHeader>
      <DialogTitle>Dialog Title</DialogTitle>
      <DialogDescription>Dialog Description</DialogDescription>
    </DialogHeader>
    <DialogPanel>Content</DialogPanel>
    <DialogFooter>
      <DialogClose>Close</DialogClose>
    </DialogFooter>
  </DialogPopup>
</Dialog>
```

## API Reference

### Dialog

Root component. Alias for `Dialog.Root` from Base UI.

### DialogTrigger

Trigger button that opens the dialog. Alias for `Dialog.Trigger` from Base UI.

### DialogCreateHandle

Creates a handle for detached dialog triggers. Use it when the trigger and popup need to be coordinated across different parts of the tree.

### DialogPopup

Popup container that displays the dialog content. Also exported as `DialogContent`.

| Prop                  | Type                        | Default | Description                                      |
| --------------------- | --------------------------- | ------- | ------------------------------------------------ |
| `showCloseButton`     | `boolean`                   | `true`  | When true, displays a close button in the top-right corner |
| `bottomStickOnMobile` | `boolean`                   | `true`  | When true, sticks to the bottom of the screen on mobile devices |
| `closeProps`          | `Dialog.Close.Props`        | -       | Props forwarded to the internal close button, useful for overriding `aria-label` |
| `portalProps`         | `Dialog.Portal.Props`       | -       | Props forwarded to the internal portal (`keepMounted`, `container`, etc.); see Base UI Dialog portal API |

### DialogHeader

Container for the dialog title and description. Supports the `render` prop for polymorphic composition (e.g. `render={<Link href="/" />}`).

### DialogFooter

Footer section for action buttons. Supports the `render` prop for polymorphic composition.

| Prop        | Type                     | Default     | Description                                      |
| ----------- | ------------------------ | ----------- | ------------------------------------------------ |
| `variant`   | `"default" \| "bare"`    | `"default"` | Controls the footer styling. `default` includes border and background, `bare` removes them |

**Example:**

```tsx
// Default variant (with border and background)
<DialogFooter>
  <DialogClose>Cancel</DialogClose>
  <Button>Save</Button>
</DialogFooter>

// Bare variant (no border or background)
<DialogFooter variant="bare">
  <DialogClose>Cancel</DialogClose>
  <Button>Save</Button>
</DialogFooter>
```

### DialogTitle

Title component. Alias for `Dialog.Title` from Base UI.

### DialogDescription

Description component. Alias for `Dialog.Description` from Base UI.

### DialogPanel

Scrollable content container. Automatically wraps content in a `ScrollArea` component. Supports the `render` prop for polymorphic composition.

| Prop         | Type      | Default | Description                                      |
| ------------ | --------- | ------- | ------------------------------------------------ |
| `scrollFade` | `boolean` | `true`  | When true, shows a fade effect at scroll edges   |

**Example:**

```tsx
<DialogPanel>
  {/* Long content that will scroll if it exceeds the dialog height */}
  <div>...</div>
</DialogPanel>
```

### DialogClose

Close button component. Alias for `Dialog.Close` from Base UI.

### DialogPortal

Portal component for rendering outside the DOM hierarchy. Alias for `Dialog.Portal` from Base UI.

### DialogBackdrop

Backdrop/overlay component. Also exported as `DialogOverlay`. Alias for `Dialog.Backdrop` from Base UI.

### DialogViewport

Viewport component for positioning. Alias for `Dialog.Viewport` from Base UI.

## Examples

### Open from a Menu

<ComponentPreview name="p-dialog-2" />

### Dialog with Bare Footer

<ComponentPreview name="p-dialog-6" />

### Dialog with scroll inside

<ComponentPreview name="p-dialog-5" />

### Nested Dialogs

<ComponentPreview name="p-dialog-3" />

### Close Confirmation

<ComponentPreview name="p-dialog-4" />