Playground

Page

layout

container

Top-level page layout wrapper — use once per route

Sets foundational min-h-screen, background, and optional vertical padding

First component in the layout hierarchy: Page → Section → Container → Stack/Grid

import { Page } from "@everydayos/ui";

Usage

The canonical Page → Section → Container → content hierarchy. Page wraps everything; Section adds vertical rhythm and optional background; Container constrains width and adds gutters.

<Page>
  <Section spacing="lg">
    <Container size="xl">
      <Stack spacing="lg">
        <Heading as="h1" size="xl">Page Title</Heading>
        <Text variant="muted">Page content goes here.</Text>
      </Stack>
    </Container>
  </Section>
</Page>

API

background

Default: default

defaultmutedwarm

spacing

Default: none

nonesmmdlg

defaultpreferredrare

maxWidth

Default: full

fullcontained

defaultpreferredrare

Prop	Type	Default
`className`	`string`	—
`children`*	`React.ReactNode`	—

Examples

Multi-Section Page

Multiple Section bands inside one Page — each section can have a different background. The Page itself stays background:default.

<Page>
  {/* Hero — full-bleed with muted background */}
  <Section spacing="xl" background="muted">
    <Container size="2xl">
      <Stack spacing="md" align="center">
        <Heading as="h1" size="display">Better Air. Everyday.</Heading>
        <Button>Discover</Button>
      </Stack>
    </Container>
  </Section>

  {/* Features — default background */}
  <Section spacing="lg">
    <Container size="xl">
      <Grid cols="3" gap="md">
        <Surface tone="muted" radius="xl" padding="lg">
          <Heading as="h3" size="m">Feature 1</Heading>
        </Surface>
        <Surface tone="muted" radius="xl" padding="lg">
          <Heading as="h3" size="m">Feature 2</Heading>
        </Surface>
        <Surface tone="muted" radius="xl" padding="lg">
          <Heading as="h3" size="m">Feature 3</Heading>
        </Surface>
      </Grid>
    </Container>
  </Section>
</Page>

Composition

Pairs well with

Section

When to avoid

Already inside a Page component — only use once per page
Building a component — Page is for full page layouts only
Console/dashboard pages with sidebar — use the sidebar layout pattern instead

Patterns

Page Layout Shell

Page

Section

Container

Stack

Heading

Text

Canonical top-level page structure. Page provides the viewport shell; Section adds vertical rhythm; Container constrains width; Stack/Grid lays out content.

<Page>
  <Section spacing="lg">
    <Container size="xl">
      <Stack spacing="lg">
        <Heading as="h1" size="xl">Title</Heading>
        <Text variant="muted">Description</Text>
      </Stack>
    </Container>
  </Section>
</Page>