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

# PageTitle

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

> Outer header bar. Carries the bottom hairline that closes the header and, when `sticky` is set, pins the bar to the top of the scroll viewport at `z-30`. Merge extra classes via `themeOverride` (or `setTheme`) on this slot without overriding the chrome.

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

| Slot | Default classes | Description |
| --- | --- | --- |
| [root](/v3/reference/theming/keys/PageTitle.md#theme-key-PageTitle-root) | callback | Outer header bar. Carries the bottom hairline that closes the header and, when `sticky` is set, pins the bar to the top of the scroll viewport at `z-30`. Merge extra classes via `themeOverride` (or `setTheme`) on this slot without overriding the chrome. |
| [container](/v3/reference/theming/keys/PageTitle.md#theme-key-PageTitle-container) | `flex flex-col` | Vertical stack that holds the title row. Layout-only; visible chrome lives on [PageTitle.root](/v3/reference/theming/keys/PageTitle.md#theme-key-PageTitle-root). |
| [titleContainer](/v3/reference/theming/keys/PageTitle.md#theme-key-PageTitle-titleContainer) | 5 classes | Title-row band: title cluster on the left, action zone on the right. `px-5 py-3` sets the page-chrome horizontal rhythm shared with the [ViewList](/v3/reference/theming/keys/ViewList.md) strips so the header reads continuous with the list chrome beneath it. |
| [titleWrapper](/v3/reference/theming/keys/PageTitle.md#theme-key-PageTitle-titleWrapper) | 2 classes | Inner column that holds the title row. `min-w-min` keeps long titles from collapsing the column below their longest unbreakable word. |
| [titleRow](/v3/reference/theming/keys/PageTitle.md#theme-key-PageTitle-titleRow) | `flex min-h-vueda-control items-center gap-2` | Row that keeps the title and its reserved loading indicator together. Its minimum height matches a standard control, so adding page actions does not increase the header height. The title text can wrap within the row. |
| [title](/v3/reference/theming/keys/PageTitle.md#theme-key-PageTitle-title) | `text-[22px] font-semibold leading-[1.2] tracking-[-0.005em]` | The page `<h1>`. Display-role type: 22 px / 600 / 1.2 with a small negative tracking so the title reads as the highest-rank text on the page. |
| [titleSkeleton](/v3/reference/theming/keys/PageTitle.md#theme-key-PageTitle-titleSkeleton) | `h-[26px] w-48` | Placeholder shown in place of the `<h1>` while the active view has registered an empty title. Sized to one line of the display-role title. |
| [loading](/v3/reference/theming/keys/PageTitle.md#theme-key-PageTitle-loading) | `flex size-5 shrink-0 items-center justify-center text-base` | Permanent space beside the title for the loading indicator, keeping the header stable when loading toggles. |
| [buttons](/v3/reference/theming/keys/PageTitle.md#theme-key-PageTitle-buttons) | 3 classes | Page-action zone on the right of the title row. `PageActions` in the active view teleports its buttons here. Wraps so a long action list folds onto a second line instead of crowding the title. |

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

## root

> Outer header bar. Carries the bottom hairline that closes the header and, when `sticky` is set, pins the bar to the top of the scroll viewport at `z-30`. Merge extra classes via `themeOverride` (or `setTheme`) on this slot without overriding the chrome.

Callback:

```javascript
({ sticky }) => ({
            class: [
                "border-b-hairline",
                {
                    "sticky top-0 z-30": sticky,
                },
            ],
        })
```

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

<a id="theme-key-PageTitle-container"></a>

## container

> Vertical stack that holds the title row. Layout-only; visible chrome lives on [PageTitle.root](/v3/reference/theming/keys/PageTitle.md#theme-key-PageTitle-root).

Default classes:

`flex flex-col`

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

<a id="theme-key-PageTitle-titleContainer"></a>

## titleContainer

> Title-row band: title cluster on the left, action zone on the right. `px-5 py-3` sets the page-chrome horizontal rhythm shared with the [ViewList](/v3/reference/theming/keys/ViewList.md) strips so the header reads continuous with the list chrome beneath it.

Default classes:

```text
w-full flex
sm:flex-row sm:justify-between
items-baseline justify-between
gap-2 md:gap-4
px-5 py-3
```

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

<a id="theme-key-PageTitle-titleWrapper"></a>

## titleWrapper

> Inner column that holds the title row. `min-w-min` keeps long titles from collapsing the column below their longest unbreakable word.

Default classes:

```text
flex flex-col gap-1
min-w-min
```

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

<a id="theme-key-PageTitle-titleRow"></a>

## titleRow

> Row that keeps the title and its reserved loading indicator together. Its minimum height matches a standard control, so adding page actions does not increase the header height. The title text can wrap within the row.

Default classes:

`flex min-h-vueda-control items-center gap-2`

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

<a id="theme-key-PageTitle-title"></a>

## title

> The page `<h1>`. Display-role type: 22 px / 600 / 1.2 with a small negative tracking so the title reads as the highest-rank text on the page.

Default classes:

`text-[22px] font-semibold leading-[1.2] tracking-[-0.005em]`

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

<a id="theme-key-PageTitle-titleSkeleton"></a>

## titleSkeleton

> Placeholder shown in place of the `<h1>` while the active view has registered an empty title. Sized to one line of the display-role title.

Default classes:

`h-[26px] w-48`

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

<a id="theme-key-PageTitle-loading"></a>

## loading

> Permanent space beside the title for the loading indicator, keeping the header stable when loading toggles.

Default classes:

`flex size-5 shrink-0 items-center justify-center text-base`

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

<a id="theme-key-PageTitle-buttons"></a>

## buttons

> Page-action zone on the right of the title row. `PageActions` in the active view teleports its buttons here. Wraps so a long action list folds onto a second line instead of crowding the title.

Default classes:

```text
flex gap-1 flex-wrap
justify-end
self-center
```

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