aragrp/docs/design-system/container.md

Container

The site has one content container. All sections, imported blocks, and future features must use it.

API

import { Container } from "@/components/container";
import { layout, containerClassName } from "@/lib/layout";

Export	What it does
<Container>	Renders div with layout.container
layout.container	Class string for rare cases without the component
containerClassName(extra?)	Merges extras via cn

Spec

Property	Value
Display	Block, full width of parent
Max width	76.8rem (1228.8px) — 20% wider than former max-w-5xl
Horizontal padding	1.5rem (px-6) at all breakpoints
Centering	mx-auto
Vertical padding	None — vertical rhythm belongs on the <section>

Full-bleed vs constrained

{/* Background spans viewport; content stays aligned */}
<section className={cn("section-shell bg-gradient-cta", layout.sectionY)}>
  <Container className="section-content">
    …
  </Container>
</section>

Rules:

• Backgrounds, borders, and decorative washes may be full viewport width.
• Text, forms, card grids, and CTAs stay inside <Container>.
• Edge-to-edge imagery (hero photos, marquees) may break out only when the design intentionally requires it; any overlaid copy still uses Container.

Replacing imported containers

When adapting Shadcn / Tailark / marketing blocks:

1. Delete their container, mx-auto max-w-*, and conflicting px-*.
2. Wrap content with <Container> (or apply layout.container).
3. Move vertical padding to layout.sectionY on the outer <section>.
4. Keep inner max-w-* only on prose columns.

Do not

• Create ContainerSm, ContainerWide, or page-specific max-widths.
• Use px-4 / px-8 as section gutters (always px-6 via the shared token).
• Apply layout.container twice (nested containers).

Related

• layout.md
• shadcn.md
• Cursor rule: .cursor/rules/layout-container.mdc