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

# DialogScrollContent

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

> The scrollable dialog surface. It stays centered inside the scroll overlay while preserving the modal radius, border, and overlay shadow used by dialog surfaces.

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

| Slot | Default classes | Description |
| --- | --- | --- |
| [root](/v3/reference/theming/keys/DialogScrollContent.md#theme-key-DialogScrollContent-root) | 3 classes | The scrollable dialog surface. It stays centered inside the scroll overlay while preserving the modal radius, border, and overlay shadow used by dialog surfaces. |
| [overlay](/v3/reference/theming/keys/DialogScrollContent.md#theme-key-DialogScrollContent-overlay) | 2 classes | The scrollable dialog overlay. It both paints the backdrop and provides a grid centering context with vertical overflow for tall modal content. |
| [close](/v3/reference/theming/keys/DialogScrollContent.md#theme-key-DialogScrollContent-close) | 2 classes | The close control for scrollable dialog content. It is positioned inside the modal surface and uses the canonical `--accent` hover fill (the same ghost-icon-button affordance used elsewhere) instead of changing layout. |

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

## root

> The scrollable dialog surface. It stays centered inside the scroll overlay while preserving the modal radius, border, and overlay shadow used by dialog surfaces.

Default classes:

```text
relative z-50 grid w-full max-w-lg my-8 gap-4
overlay-hairline overlay-hairline-elevated bg-background text-foreground p-6 duration-200
sm:rounded-vueda-modal md:w-full
```

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

<a id="theme-key-DialogScrollContent-overlay"></a>

## overlay

> The scrollable dialog overlay. It both paints the backdrop and provides a grid centering context with vertical overflow for tall modal content.

Default classes:

```text
fixed inset-0 z-50 grid place-items-center overflow-y-auto bg-overlay
data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0
```

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

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

## close

> The close control for scrollable dialog content. It is positioned inside the modal surface and uses the canonical `--accent` hover fill (the same ghost-icon-button affordance used elsewhere) instead of changing layout.

Default classes:

```text
absolute top-4 right-4 p-0.5
transition-colors rounded-md hover:bg-accent hover:text-accent-foreground active:bg-accent-active active:text-accent-foreground
```

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