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

# ViewRead

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

> Outer wrapper. Layout-only; PageTitle, the StickyBar, and the body below own the visible chrome, so this stays empty by default.

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

| Slot | Default classes | Description |
| --- | --- | --- |
| [root](/v3/reference/theming/keys/ViewRead.md#theme-key-ViewRead-root) |  | Outer wrapper. Layout-only; PageTitle, the StickyBar, and the body below own the visible chrome, so this stays empty by default. |
| [body](/v3/reference/theming/keys/ViewRead.md#theme-key-ViewRead-body) | `px-5 py-5` | Body region wrapping the error display and the read-only field layout. `px-5 py-5` sets the content gutter; the horizontal `px-5` aligns the body's left edge with the [StickyBar](/v3/reference/theming/keys/StickyBar.md) controls and [PageTitle](/v3/reference/theming/keys/PageTitle.md) title above it so the page chrome reads as a continuous column. Inherited `$attrs` (including a consumer-supplied `class`) merge here. |
| [recordName](/v3/reference/theming/keys/ViewRead.md#theme-key-ViewRead-recordName) | `mb-4 text-lg font-semibold leading-tight break-words` | Heading at the top of the body that names the record by its formatted name, above the read-only fields. It scrolls with the body rather than sticking with the page title, so a long name wraps instead of growing the sticky header. |
| [recordNameSkeleton](/v3/reference/theming/keys/ViewRead.md#theme-key-ViewRead-recordNameSkeleton) | `mb-4 h-[22px] w-64 max-w-full` | Placeholder shown in place of [ViewRead.recordName](/v3/reference/theming/keys/ViewRead.md#theme-key-ViewRead-recordName) while the record is loading. Sized to one line of the heading. |

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

## root

> Outer wrapper. Layout-only; PageTitle, the StickyBar, and the body below own the visible chrome, so this stays empty by default.

Source: `client/lib/theme/vueda-tailwind/views/ViewRead.theme.js:18`

<a id="theme-key-ViewRead-body"></a>

## body

> Body region wrapping the error display and the read-only field layout. `px-5 py-5` sets the content gutter; the horizontal `px-5` aligns the body's left edge with the [StickyBar](/v3/reference/theming/keys/StickyBar.md) controls and [PageTitle](/v3/reference/theming/keys/PageTitle.md) title above it so the page chrome reads as a continuous column. Inherited `$attrs` (including a consumer-supplied `class`) merge here.

Default classes:

`px-5 py-5`

Source: `client/lib/theme/vueda-tailwind/views/ViewRead.theme.js:22`

<a id="theme-key-ViewRead-recordName"></a>

## recordName

> Heading at the top of the body that names the record by its formatted name, above the read-only fields. It scrolls with the body rather than sticking with the page title, so a long name wraps instead of growing the sticky header.

Default classes:

`mb-4 text-lg font-semibold leading-tight break-words`

Source: `client/lib/theme/vueda-tailwind/views/ViewRead.theme.js:26`

<a id="theme-key-ViewRead-recordNameSkeleton"></a>

## recordNameSkeleton

> Placeholder shown in place of [ViewRead.recordName](/v3/reference/theming/keys/ViewRead.md#theme-key-ViewRead-recordName) while the record is loading. Sized to one line of the heading.

Default classes:

`mb-4 h-[22px] w-64 max-w-full`

Source: `client/lib/theme/vueda-tailwind/views/ViewRead.theme.js:30`