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

# AuthForm

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

> Outer wrapper that fills the viewport vertically so the framed card can sit against the page background without a separate page chrome.

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

| Slot | Default classes | Description |
| --- | --- | --- |
| [root](/v3/reference/theming/keys/AuthForm.md#theme-key-AuthForm-root) | `flex min-h-full flex-col` | Outer wrapper that fills the viewport vertically so the framed card can sit against the page background without a separate page chrome. |
| [outer](/v3/reference/theming/keys/AuthForm.md#theme-key-AuthForm-outer) | `flex flex-col gap-3 max-w-3xl` | Column between the viewport edge and the framed card. Caps at `3xl` so the card never stretches past the readable column width on a wide viewport. |
| [inner](/v3/reference/theming/keys/AuthForm.md#theme-key-AuthForm-inner) | 3 classes | Framed card surrounding the form. 32 px padding on a bordered `--background` fill with a soft radius and an internal scroll if the form exceeds the viewport; capped at 35 rem on `sm+` so the card reads as a focused composition. |
| [contentContainer](/v3/reference/theming/keys/AuthForm.md#theme-key-AuthForm-contentContainer) | `min-w-min` | Inner content column inside the card. `min-w-min` keeps the column from collapsing below its longest unbreakable word (e.g. a long heading). |
| [title](/v3/reference/theming/keys/AuthForm.md#theme-key-AuthForm-title) | `mt-5` | Title region above the form body; spacing only, see `header` and `subTitle` for the text recipes. |
| [header](/v3/reference/theming/keys/AuthForm.md#theme-key-AuthForm-header) | `text-heading` | The card's `<h1>`. Unlike [AuthorizingForm.header](/v3/reference/theming/keys/AuthorizingForm.md#theme-key-AuthorizingForm-header), a page-level PageTitle already sits above this card, so the heading reads as a section head inside it rather than the page title. |
| [subTitle](/v3/reference/theming/keys/AuthForm.md#theme-key-AuthForm-subTitle) | `mt-1 text-muted-foreground text-[length:var(--vueda-text-supporting)] leading-[1.4] font-normal` | The card's subtitle paragraph beneath the heading. Supporting-text recipe, matching [FieldDescription.root](/v3/reference/theming/keys/FieldDescription.md#theme-key-FieldDescription-root). |

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

## root

> Outer wrapper that fills the viewport vertically so the framed card can sit against the page background without a separate page chrome.

Default classes:

`flex min-h-full flex-col`

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

<a id="theme-key-AuthForm-outer"></a>

## outer

> Column between the viewport edge and the framed card. Caps at `3xl` so the card never stretches past the readable column width on a wide viewport.

Default classes:

`flex flex-col gap-3 max-w-3xl`

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

<a id="theme-key-AuthForm-inner"></a>

## inner

> Framed card surrounding the form. 32 px padding on a bordered `--background` fill with a soft radius and an internal scroll if the form exceeds the viewport; capped at 35 rem on `sm+` so the card reads as a focused composition.

Default classes:

```text
p-8 rounded hairline hairline-border bg-background
flex flex-col items-stretch gap-3 overflow-y-auto
max-w-full sm:w-[35rem]
```

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

<a id="theme-key-AuthForm-contentContainer"></a>

## contentContainer

> Inner content column inside the card. `min-w-min` keeps the column from collapsing below its longest unbreakable word (e.g. a long heading).

Default classes:

`min-w-min`

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

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

## title

> Title region above the form body; spacing only, see `header` and `subTitle` for the text recipes.

Default classes:

`mt-5`

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

<a id="theme-key-AuthForm-header"></a>

## header

> The card's `<h1>`. Unlike [AuthorizingForm.header](/v3/reference/theming/keys/AuthorizingForm.md#theme-key-AuthorizingForm-header), a page-level PageTitle already sits above this card, so the heading reads as a section head inside it rather than the page title.

Default classes:

`text-heading`

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

<a id="theme-key-AuthForm-subTitle"></a>

## subTitle

> The card's subtitle paragraph beneath the heading. Supporting-text recipe, matching [FieldDescription.root](/v3/reference/theming/keys/FieldDescription.md#theme-key-FieldDescription-root).

Default classes:

`mt-1 text-muted-foreground text-[length:var(--vueda-text-supporting)] leading-[1.4] font-normal`

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