# Dialog (/docs/components/dialog)



<ComponentPreview name="dialog-demo" />

## Overview [#overview]

Use a dialog when the user needs to focus on a task without leaving the current page.

Dialogs are good for forms, confirmations, detail views, short workflows, and focused editing. Avoid dialogs for large multi-step experiences that need a full page.

## Anatomy [#anatomy]

A dialog has a trigger, popup, header, title, description, content, footer, and close action. The title should explain the task. The footer usually contains the main action and a cancel or close action.

## Behavior [#behavior]

Dialogs open above the page and should keep focus inside while open. Use nested dialogs only when the second dialog is a true interruption, such as confirming a close action.

## Accessibility [#accessibility]

Always provide a title. Add a description when the task needs context. Make sure destructive actions are explicit and that focus returns to the trigger when the dialog closes.

## Installation [#installation]

<CodeTabs>
  <TabsList>
    <TabsTab value="cli">
      CLI
    </TabsTab>

    <TabsTab value="manual">
      Manual
    </TabsTab>
  </TabsList>

  <TabsPanel value="cli">
    ```bash
    npx love-ui@latest add dialog
    ```
  </TabsPanel>

  <TabsPanel value="manual">
    <Steps>
      <Step>
        Install the following dependencies:
      </Step>

      ```bash
      npm install @base-ui-components/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 [#usage]

```tsx
import {
  Dialog,
  DialogDescription,
  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>
    <DialogFooter>
      <DialogClose>Close</DialogClose>
    </DialogFooter>
  </DialogPopup>
</Dialog>
```

## Examples [#examples]

The examples show opening from a menu, nesting, and confirming close actions.

### Open from a Menu [#open-from-a-menu]

<ComponentPreview name="dialog-from-menu" />

### Nested Dialogs [#nested-dialogs]

<ComponentPreview name="dialog-nested" />

### Close Confirmation [#close-confirmation]

<ComponentPreview name="dialog-close-confirmation" />