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

Slot	Default classes	Description
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	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	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	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	mt-5	Title region above the form body; spacing only, see header and subTitle for the text recipes.
header	text-heading	The card's <h1>. Unlike 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	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.

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

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

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:

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

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

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

header

The card's <h1>. Unlike 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

subTitle

The card's subtitle paragraph beneath the heading. Supporting-text recipe, matching 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