Playground

Container

layout

container

Max-width wrapper with centered horizontal alignment and responsive gutters

Third layer in the hierarchy: Page → Section → Container → Stack/Grid

Provides horizontal constraint (max-w + px) only — never adds vertical padding

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

Usage

Container always lives inside a Section (or directly in a Page when no Section background is needed). It centers content and adds responsive side gutters.

<Section spacing="lg">
  <Container size="xl">
    <Stack spacing="md">
      <Heading as="h2" size="l">Title</Heading>
      <Text variant="muted">Content is constrained to max-w-xl and centered.</Text>
    </Stack>
  </Container>
</Section>

API

size

Default: xl

smmdlgxl2xlfull

defaultpreferredrare

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

Examples

Container without padding (full-bleed inner)

Use padding={false} when the content inside must touch the edges of the container — e.g. a full-width image that snaps to the container boundary.

<Section spacing="lg">
  <Container size="2xl" padding={false}>
    <MediaFrame aspect="16/9" radius="2xl"
      media={<Image src="/wide.webp" fill className="object-cover" alt="" />}
    />
  </Container>
</Section>

Narrow container for prose

Use size='md' or size='lg' for long-form text — limits line length for readability. Default 'xl' is for general UI; '2xl' for dashboard-width layouts.

<Section spacing="xl">
  <Container size="md">
    <Stack spacing="lg">
      <Heading as="h1" size="xl">Article Title</Heading>
      <Text variant="lead">Introduction paragraph with comfortable reading width.</Text>
      <Text>Body copy constrained to a legible line length.</Text>
    </Stack>
  </Container>
</Section>

Composition

Pairs well with

Section

Stack

Grid

Heading

When to avoid

Need full-bleed content — use Section without Container, or Section spacing='none'
Already inside a Container — never nest Container inside Container
Need vertical spacing — Container does not add py; use Section spacing for that

Patterns

Section + Container

Section

Container

Stack

The canonical pairing. Section provides the full-width background and vertical rhythm. Container constrains width and adds horizontal gutters. These two always go together.

<Section spacing="lg">
  <Container size="xl">
    <Stack spacing="md">
      {/* content */}
    </Stack>
  </Container>
</Section>

Split Section (text + media)

Section

Container

Grid

Stack

MediaFrame

Heading

Text

Button

Two-column layout inside a Container — text on one side, media on the other. Grid handles the split; Container constrains the width.

<Section spacing="xl">
  <Container size="2xl">
    <Grid cols="2-asymmetric" gap="lg">
      <Stack spacing="md" justify="center">
        <Heading as="h2" size="xl">Headline</Heading>
        <Text variant="muted">Supporting description.</Text>
        <Button className="w-fit">CTA</Button>
      </Stack>
      <MediaFrame aspect="4/3" radius="2xl"
        media={<Image src="/product.webp" fill className="object-cover" alt="" />}
      />
    </Grid>
  </Container>
</Section>