layouts
PageContainer
Centers page content at the canonical max-width set in `@8maverik8/tokens`. Use this on every content page so the column lines up across products.
Install
Pull this component (and its dependencies) straight into your app via the shadcn CLI:
npx shadcn@latest add https://design.oapps.io/r/page-container.jsonOr import from the workspace package:
import { PageContainer } from "@8maverik8/design";Examples
Narrow form
narrow — 640px
<PageContainer size="narrow">
<form>…</form>
</PageContainer>Variants
size
narrow640px — forms, settings, single-column copy.medium(default)896px — standard pages.wide1520px — wide tables and dashboards.full100% — true full-bleed (e.g. fullscreen builders).
Guidelines
- Wrap the body of every content page in PageContainer.If every product hand-codes max-widths, columns drift apart visually across the platform.
- Hard-code `max-w-3xl` or `max-w-screen-xl` directly.If we ever change container widths globally, hand-coded values won't follow.