PageSection

A titled group of cards inside one page, for long pages that mix concerns (Settings: Account, Sign-in, Workspace).

LayoutServer-rendered

Examples

Settings groups

An h2 with a hairline under it, then the section’s cards with the usual 16px gap.

Account

Who you are and how you sign in.

Passkeys

2 passkeys can sign in to this account.

Workspace

Defaults for every server and agent in Personal.

Compact responses

Shrinks tool results so agents spend fewer tokens.

Example

Wrap

<Stack gap="8">
  <PageSection title="Account" description="Who you are and how you sign in.">
    <Card><CardHeader title="Passkeys" description="2 passkeys can sign in to this account." /></Card>
  </PageSection>
  <PageSection title="Workspace" description="Defaults for every server and agent in Personal.">
    <Card><CardHeader title="Compact responses" actions={<Switch name="compact" checked aria-label="Compact responses" />} /></Card>
  </PageSection>
</Stack>

Usage

Wrap

import { PageSection } from '@switchboard/ui'

<Stack gap="8">
  <PageSection id="account" title="Account" description="Who you are and the ways you sign in.">
    <Card>…</Card>
  </PageSection>
</Stack>

Props

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

`PageSection`

PageSection props
Prop	Type	Default	Description
title*	RemixNode	–	Section heading, rendered as an h2.
description	RemixNode	–	One line under the heading.
actions	RemixNode	–	Controls for the whole section, right-aligned on the heading line.
children	RemixNode	–	The section’s cards, stacked 16px apart.

Also accepts every <section> attribute. With an id, the heading gets `${id}-heading` and labels the section.

Accessibility

The title is an h2 under the page’s h1; with an id the <section> is labelled by it.