---
url: "https://vueda.dev/v3/reference/theming/keys/DialogContent.md"
title: "DialogContent"
---

# DialogContent

Source: `client/lib/theme/vueda-tailwind/shell/index.js`

> The dialog surface. Standard dialogs use fixed viewport centering, the modal radius, and overlay shadow; full-screen dialogs replace that geometry with a viewport-filling surface. Both own the paired background and foreground tokens.

Vue component: [DialogContent](/v3/reference/api/vue/DialogContent.md)

| Slot | Default classes | Description |
| --- | --- | --- |
| [root](/v3/reference/theming/keys/DialogContent.md#theme-key-DialogContent-root) | callback | The dialog surface. Standard dialogs use fixed viewport centering, the modal radius, and overlay shadow; full-screen dialogs replace that geometry with a viewport-filling surface. Both own the paired background and foreground tokens. |
| [close](/v3/reference/theming/keys/DialogContent.md#theme-key-DialogContent-close) | 3 classes | The close control inside the dialog surface. It stays low-emphasis until hover or focus and uses the shared ring color for keyboard focus. |

<a id="theme-key-DialogContent-root"></a>

## root

> The dialog surface. Standard dialogs use fixed viewport centering, the modal radius, and overlay shadow; full-screen dialogs replace that geometry with a viewport-filling surface. Both own the paired background and foreground tokens.

Callback:

```javascript
({ fullScreen }) => {
            const geometry = fullScreen
                ? [
                      // Full-screen layout.
                      "inset-0 h-dvh w-full max-w-none gap-0 rounded-none border-0 p-0",
                  ]
                : [
                      // Centered modal layout.
                      "top-[50%] left-[50%] w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4",
                      "rounded-vueda-modal overlay-hairline overlay-hairline-elevated p-6 sm:max-w-lg",
                  ];
            return {
                class: [
                    // Surface and motion.
                    "bg-background text-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95",

                    // Shared positioning and layout.
                    "fixed z-50 grid duration-200",

                    ...geometry,
                ],
            };
        }
```

Source: `client/lib/theme/vueda-tailwind/shell/DialogContent.theme.js:18`

<a id="theme-key-DialogContent-close"></a>

## close

> The close control inside the dialog surface. It stays low-emphasis until hover or focus and uses the shared ring color for keyboard focus.

Default classes:

```text
data-[state=open]:bg-accent data-[state=open]:text-muted-foreground absolute top-4 right-4
rounded-xs opacity-70 transition-opacity hover:opacity-100 focus-visible:focus-ring disabled:pointer-events-none
text-sm leading-none
```

Source: `client/lib/theme/vueda-tailwind/shell/DialogContent.theme.js:44`