AppPageScaffold

src/lib/components/AppPageScaffold.svelte

Purpose

The low-level page shell that fills the main content region (full width, no max-width). It applies outer padding (p-2 sm:p-3), a vertical stack with gap-4 and min-h-0 so flex children can shrink, and a bordered body region for children. The header is either a legacy full header snippet, or a title string (rendered as a truncated h1) plus optional headerExtras snippet. AppPageLayout builds on top of this with breadcrumbs and actions.

Origin

Custom — Primebrick-written.

Usage

Title string

Code
<AppPageScaffold title="Dashboard">
  <Dashboard />
</AppPageScaffold>

Title with header extras

Code
<AppPageScaffold title="Users" headerExtras={<Badge>{count} total</Badge>}>
  <UserTable />
</AppPageScaffold>

Legacy full header snippet

Code
<AppPageScaffold>
  {#snippet header()}
    <header>
      <AppPageBreadcrumb {segments} />
      <h1>Users</h1>
    </header>
  {/snippet}

  <UserTable />
</AppPageScaffold>

Props

Full prop table: see API reference — apppagescaffold.

Key props: title?: string, headerExtras?: Snippet, header?: Snippet (legacy), children?: Snippet.

Next steps

• Component catalog
• UI stack
• API reference