Skip to catalog content
Mado UI Open-code components

Source-owned · zero runtime dependencies

template · authentication-shell

Authentication shell

A stateless Mado layout recipe for focused guest flows with skip navigation, a home link and application-owned access policy.

Install with npx @madojs/ui@latest add authentication-shell.

Template

Authentication shell

Composition

  • Use the default Page as a narrow layout around authentication child routes: skip link, brand header, one main outlet and a content surface.
  • Replace the brand and public-home path at copy time; route pages own credentials, validation and submission.

Public API

export default Page
Layout-ready authentication shell.
export authenticationShellView({ child })
Directly previewable view for the authored child content.
attribute data-mado-focus
Marks the main outlet as the route-navigation focus target.
class mado-ui-authentication-shell-*
Shell, skip-link, header, brand, main and content hooks.

Detected public classes

  • .mado-ui-authentication-shell
  • .mado-ui-authentication-shell-brand
  • .mado-ui-authentication-shell-content
  • .mado-ui-authentication-shell-header
  • .mado-ui-authentication-shell-main
  • .mado-ui-authentication-shell-skip-link

Detected public CSS properties

  • --mado-ui-authentication-shell-background
  • --mado-ui-authentication-shell-border
  • --mado-ui-authentication-shell-brand-color
  • --mado-ui-authentication-shell-color
  • --mado-ui-authentication-shell-content-max-inline-size
  • --mado-ui-authentication-shell-content-padding
  • --mado-ui-authentication-shell-content-padding-wide
  • --mado-ui-authentication-shell-focus-ring
  • --mado-ui-authentication-shell-header-max-inline-size
  • --mado-ui-authentication-shell-header-padding
  • --mado-ui-authentication-shell-header-padding-wide
  • --mado-ui-authentication-shell-main-padding
  • --mado-ui-authentication-shell-main-padding-wide
  • --mado-ui-authentication-shell-radius
  • --mado-ui-authentication-shell-shadow
  • --mado-ui-authentication-shell-skip-background
  • --mado-ui-authentication-shell-skip-border
  • --mado-ui-authentication-shell-skip-color
  • --mado-ui-authentication-shell-skip-radius
  • --mado-ui-authentication-shell-surface
  • --mado-ui-authentication-shell-wash
  • --mado-ui-color-action
  • --mado-ui-color-action-contrast
  • --mado-ui-color-border
  • --mado-ui-color-canvas
  • --mado-ui-color-surface
  • --mado-ui-color-text
  • --mado-ui-focus-ring
  • --mado-ui-radius-lg
  • --mado-ui-radius-sm
  • --mado-ui-shadow-md
  • --mado-ui-space-2
  • --mado-ui-space-3
  • --mado-ui-space-4
  • --mado-ui-space-6
  • --mado-ui-space-7

Accessibility contract

  • Keep one main landmark and a working skip link; each child route supplies its own h1 and form labels.
  • The shell deliberately owns no authentication status, error announcement or secret-handling behavior.

Keyboard

  • The template adds no page-wide keyboard model; native links, forms and controls keep their browser-defined behavior.

Focus

  • The consuming route layout owns navigation focus. Keep one meaningful data-mado-focus target and do not focus arbitrary content updates.

Fallback

  • The copied template renders semantic HTML; links and native forms remain understandable before optional client-side enhancement.

Installation graph

Direct dependencies

Resolved install order

Copied source

The CLI resolves each registry source path into the configured project target. Links below point to the exact catalog build tag.