Container

Page-shell width. Centres content at the brand's content width with its horizontal gutters.

import { Container } from "@evolve-storefront/ui/container";

Design notes

The width is a brand-contract token, not a hardcoded max-w-*: a brand changes --container-max and --container-padding in its @theme and every page follows — no component change, no ejection.

Deliberately one width, with no size variant. Across evolve-platform's 53 call sites only two ask for a narrower shell, and className="max-w-4xl" covers those without growing a prop that every consumer then has to reason about. Add a variant when a second width is genuinely load-bearing.

Preview

DefaultOpen in Storybook ↗

Usage

<Container>
  <h1>{t("title")}</h1>
  {children}
</Container>;

Props

No props of its own.

Examples

Page ShellStacked sections share one width, which is the point of the primitive.

// Each section of the shell gets its own Container, so they share one width.
<Container><SiteHeader /></Container>
<Container><main>{children}</main></Container>
<Container><SiteFooter /></Container>

Open in Storybook ↗

Narrower Via Class NameA narrower shell is a className, not a variant — the handful of call sites that need one say so locally.

<Container className="max-w-4xl">
  <CheckoutForm />
</Container>;

Open in Storybook ↗

Brand OverrideA brand overrides the token; the component is untouched.

/* in the brand's global.css */
@theme {
  --container-max: 48rem;
  --container-padding: 1.5rem;
}

Open in Storybook ↗