The centered single-column screen every auth flow uses: sign in, sign up, forgot/reset password, verify email, resend verification, OAuth callback.

Yunxin hand-rolls this shell nine times — each copy re-deriving the viewport centring, the column width, the brand row spacing and the card chrome. This is a straight extraction of that markup, class for class: Yunxin is the original and stays the reference, so a screen that adopts AuthShell renders identically to the copy it replaces.

That is also why the panel is p-6 bg-card border border-border rounded-xl and not the house .card class. .card is a 20px radius with a shadow and a hover transition — swapping it in would have quietly restyled all nine screens.

Import

1import { AuthShell } from "@yuhuanowo/yunui/patterns";

Basic

AuthShell fills the viewport (min-h-dvh); the preview below is scaled down inside a frame.

Slots

• brand — the logo/wordmark row above the card. Pass homeHref and it becomes a link home, with the same gap-2.5 mb-8 row Yunxin uses.
• title / subtitle — centered heading and supporting line. The heading's bottom margin follows Yunxin: mb-2 when there is a subtitle, mb-6 when there is not.
• error — a failed submit, rendered in the soft-error box these screens share. Falsy values render nothing, so error={submitError} is safe.
• icon — a medallion or spinner above the heading, for confirmation and status screens.
• centered — centers everything in the card, for "check your email" style screens.
• footer — muted content under the card.
• width — sm (default) for a sign-in form, md for the wider error / not-found screens.

Anything that varies per screen stays in children. The shell owns only what is identical in all nine copies.

Failed submit

Errors do not get their own layout — they slot above the form in the box every one of these screens already uses.

Props