Skip to content

AuthLayout

The centered single-card frame for sign-in, sign-up and consent pages, under the Switchboard wordmark.

LayoutServer-rendered

Examples

Sign-in card

Heading, one line of description, the form, and a footer link. viewport={false} keeps the preview short.

Light
Switchboard

Sign in to Switchboard

Use the passkey saved on this device, your phone, or a security key.

Dark
Switchboard

Sign in to Switchboard

Use the passkey saved on this device, your phone, or a security key.

Example
<AuthLayout
  viewport={false}
  heading="Sign in to Switchboard"
  description="Use the passkey saved on this device, your phone, or a security key."
  footer={
    <Text size="sm" tone="ink-2">
      New to Switchboard? <Link href="#signup">Create an account</Link>
    </Text>
  }
>
  <Button block icon="key">
    Sign in with a passkey
  </Button>
</AuthLayout>

Wordmark

The name and its 3×3 jack field with one lit jack. Links home; also used as the sidebar header.

Light
Switchboard
Dark
Switchboard
Example
<Wordmark href="/" />

Usage

Usage
import { AuthLayout, Wordmark } from '@switchboard/ui'

// Body-level: wrap it in the app's Document and add the Toaster.
<Document title="Sign in · Switchboard">
  <AuthLayout heading="Sign in to Switchboard" footer={footer}>
    <PasskeyForm mode="signin" />
  </AuthLayout>
  <Toaster flash={flash} />
</Document>

Props

Every component also takes mix, for css() and mixins applied after its own style.

AuthLayout

AuthLayout props
PropTypeDefaultDescription
heading*RemixNode–The card heading (the page h1).
descriptionRemixNode–One line under the heading.
footerRemixNode–Card footer, usually a link to the other auth page.
viewportbooleantrueFill the viewport height and center the card. False for previews.
homeHrefstring'/'Where the wordmark links.
childrenRemixNode–The form.

Also accepts every <main> attribute.

Wordmark

Wordmark props
PropTypeDefaultDescription
hrefstring'/'Link target.

Also accepts every <a> attribute.

Accessibility

  • Renders the page <main> landmark; the heading is the only h1.
  • The wordmark is a link named "Switchboard"; the mark is aria-hidden.
  • The card is at most 400px wide and keeps 16px gutters at phone width.

Guidance

Do

  • Keep one form per card.
  • Put the switch to the other auth page in the footer.

Don’t

  • Put a sidebar or topbar around it.
  • Render two AuthLayouts on one page outside the docs.