NarrowShell

A centred column for one-off pages (sign-in, consent, the OAuth popup result, connect-a-server), with AuthCard for the card.

LayoutServer-rendered

Examples

Consent page (md)

Wordmark banner, one main, a small-print footer. viewport={false} keeps the preview short.

Light

Switchboard

CClaude CodeSwitchboard

Allow Claude Code to use Switchboard?

It will see every enabled server and skill in Personal.

Dark

Switchboard

CClaude CodeSwitchboard

Allow Claude Code to use Switchboard?

It will see every enabled server and skill in Personal.

Example

Wrap

<NarrowShell width="md" backdrop footer="…">
  <AuthCard lead={<ConnectionPlate … />} heading="Allow Claude Code to use Switchboard?" description="…" footer={…}>
    <form method="post">…</form>
  </AuthCard>
</NarrowShell>

Usage

Wrap

import { NarrowShell, AuthCard } from '@switchboard/ui'

<Document title="Allow access · Switchboard">
  <NarrowShell width="md">
    <AuthCard heading="…">…</AuthCard>
  </NarrowShell>
</Document>

Props

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

`NarrowShell`

NarrowShell props
Prop	Type	Default	Description
width	'sm' \| 'md'	'sm'	400px (auth, popup) or 560px (consent, connect).
brand	boolean	true	Wordmark banner above the column.
footer	RemixNode	–	Small print under the column.
viewport	boolean	true	Fill the viewport and centre vertically.
homeHref	string	'/'	Where the wordmark links.
backdrop	boolean	false	A faint jack field behind the column (auth and OAuth pages).

Also accepts every <div> attribute.

`AuthCard`

AuthCard props
Prop	Type	Default	Description
heading*	RemixNode	–	The page h1.
description	RemixNode	–	One line under the heading.
lead	RemixNode	–	Above the heading: a ConnectionPlate.
footer	RemixNode	–	Card footer: the link to the other auth page.
focusHeading	boolean	–	The h1 takes the initial focus (consent).

Also accepts every <section> attribute.

Accessibility

Renders a <header> banner (wordmark), one <main>, and an optional <footer>.
AuthCard’s heading is the only h1.

Guidance

Do

Use one card per page.

Don’t

Put a sidebar or AppHeader around it.