Skip to content

Hero

The landing page opener: a left-aligned h1, a lede and actions, with a visual beside it (under it on phones).

LayoutServer-rendered

Examples

Hero with a PatchPanel

One MCP URL for every server your agents use.

Add your MCP servers and skills once. Switchboard serves them from a single endpoint.

Get startedRead the docs
Upstream serversExample workspace
  • ConnectedGitHubapi.githubcopilot.com/mcp
  • ConnectedLinearmcp.linear.app/mcp
  • Sign-in neededNotionmcp.notion.com/mcp

Your agents connect toServinghttps://switchboard.example.com/mcp

Example
<Hero
  title="One MCP URL for every server your agents use."
  lede="Add your MCP servers and skills once. …"
  actions={<><Button href={signUp} size="lg">Get started</Button><Button href={docs} size="lg" variant="secondary">Read the docs</Button></>}
  aside={<PatchPanel lines={lines} url={mcpUrl} />}
/>

SiteSection: content and closing call to action

With children it is a titled band; with only `actions` it becomes a closing call to action with a larger title.

How it works

Three steps, all in the dashboard.

Section content (a StepList, a Grid of Cards, a CodeBlock).

Add your first server

Create an account with a passkey, then paste your first server URL.

Get started
Example
<SiteSection title="How it works" description="…"><StepList steps={…} /></SiteSection>
<SiteSection tone="band" title="Add your first server" description="…" actions={<Button href={signUp}>Get started</Button>} />

Usage

Usage
import { Hero, SitePage, SiteSection } from '@switchboard/ui'

<SitePage header={<SiteHeader … />} footer={<SiteFooter … />}>
  <Hero title lede actions aside />
  <SiteSection title description?>…</SiteSection>
</SitePage>

Props

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

Hero

Hero props
PropTypeDefaultDescription
title*RemixNode–The page's one h1, at the display size (32px on phones, 44px from 768px).
ledeRemixNode–One or two sentences, 52ch max.
actionsRemixNode–One primary and one secondary Button, size lg.
asideRemixNode–The visual (a PatchPanel or an IllustrationFrame). Beside the text from 960px.
kickerRemixNode–A sentence-case line above the title naming the category (a Kicker).
noteRemixNode–One quiet line under the actions (compatibility, sign-up methods).

Also accepts every <section> attribute.

SiteSection

SiteSection props
PropTypeDefaultDescription
title*RemixNode–The h2.
descriptionRemixNode–A sentence under the title.
actionsRemixNode–Buttons under the description. Without children the section is a closing call to action.
tone'plain' | 'band''plain'`band` sits on the surface colour between hairlines.
titleSize'2xl' | '3xl'–3xl for a feature section that reads as a second act.
kickerRemixNode–Who the section is for, above the title (a Kicker).
asideRemixNode–A visual beside the head from 960px (e.g. an IllustrationFrame on a closing call to action).
idstring–Anchor for in-page nav. Sections clear the sticky SiteHeader (scroll-margin-top).

SitePage

SitePage props
PropTypeDefaultDescription
headerRemixNode–A SiteHeader.
footerRemixNode–A SiteFooter.
childrenRemixNode–Rendered in the one <main>, after a "Skip to content" link.

Heading (marketing sizes)

Heading (marketing sizes) props
PropTypeDefaultDescription
size'display' | '3xl' | '2xl'–Marketing only. display: 32→44px, 3xl: 24→32px, 2xl: 24px.

SiteHeader (signUpLabel)

SiteHeader (signUpLabel) props
PropTypeDefaultDescription
signUpLabelstring"Create account"Label of the sign-up button.

Accessibility

  • Hero and each SiteSection are <section>s named by their heading (aria-labelledby).
  • SitePage renders exactly one <main> and a skip link to it.

Guidance

Do

  • Keep the h1 a plain sentence.
  • Use StepList only for a real sequence; capabilities go in a Grid of Cards.

Don’t

  • Add all-caps eyebrows or gradients (a Kicker is sentence case and says who it is for).
  • Use display sizes in the dashboard.