Page Layout

Page-level layout patterns for composing headers, bodies, and tabbed content. These organisms sit inside AppShellMain and provide consistent page structure.

PageHeader with Breadcrumb and Actions

Settings

Manage your account preferences.

PageBody content goes here.

<PageHeader>
  <PageHeaderBreadcrumb>
    <Breadcrumb>
      <BreadcrumbList>
        <BreadcrumbItem>
          <BreadcrumbLink href="/">Home</BreadcrumbLink>
        </BreadcrumbItem>
        <BreadcrumbSeparator />
        <BreadcrumbItem>
          <BreadcrumbPage>Settings</BreadcrumbPage>
        </BreadcrumbItem>
      </BreadcrumbList>
    </Breadcrumb>
  </PageHeaderBreadcrumb>
  <PageHeaderContent>
    <div>
      <PageHeaderTitle>Settings</PageHeaderTitle>
      <PageHeaderDescription>
        Manage your account preferences.
      </PageHeaderDescription>
    </div>
    <PageHeaderActions>
      <Button variant="outline">Cancel</Button>
      <Button>Save</Button>
    </PageHeaderActions>
  </PageHeaderContent>
</PageHeader>

Page with Tabs

Project

Overview tab content goes here.

<PageHeader>
  <PageHeaderContent>
    <PageHeaderTitle>Project</PageHeaderTitle>
  </PageHeaderContent>
</PageHeader>
<PageTabs defaultValue="overview">
  <PageTabsList>
    <PageTabsTrigger value="overview">Overview</PageTabsTrigger>
    <PageTabsTrigger value="activity">Activity</PageTabsTrigger>
    <PageTabsTrigger value="settings">Settings</PageTabsTrigger>
  </PageTabsList>
  <PageTabsContent value="overview">
    <PageBody>Overview content</PageBody>
  </PageTabsContent>
</PageTabs>

PageHeader Props

Prop	Type	Default	Description
`className`	`string`	—	Additional CSS classes to apply to the page header.

PageBody Props

Prop	Type	Default	Description
`fullWidth`	`boolean`	`false`	Skip the max-width Center wrapper when true.
`padding`	`"default" \| "none"`	`"default"`	Use "none" to remove default padding.