Container

Centered max-width wrapper that constrains content to readable widths. Sizes map to `--container-*` prose-width tokens; padding maps to `--space-*`.

Reading-width article (size="md", padding="md")

The container caps the line length so paragraphs stay readable on wide screens. Padding adds breathing room on narrow ones — same component, two responsibilities.

Dashboard frame (size="lg", padding="lg")

Revenue

Sessions

Conversion

Full-bleed hero (size="full", padding="none")

Full-bleed hero region

Edge-to-edge with no padding — useful for marketing surfaces.

Installation

pnpm

pnpm dlx @hex-core/cli add container

Full-width hero

Use size=full when you want the section to span the viewport.

tsx

<Container size="full" padding="none">
  <Hero />
</Container>

Narrow article (size=sm)

Tight column for legal copy or single-column onboarding steps where line length should stay around 60-70 characters.

tsx

<Container size="sm" padding="md" className="py-12">
  <Stack gap="md">
    <h1 className="text-2xl font-semibold tracking-tight">Terms of service</h1>
    <p className="text-sm leading-relaxed text-muted-foreground">
      By creating an account you agree to the following terms. Please read them carefully — they
      describe how we handle your data, what you can publish, and how disputes are resolved.
    </p>
    <p className="text-sm leading-relaxed text-muted-foreground">
      Last updated 1 March 2026. Material changes are announced at least 30 days in advance.
    </p>
  </Stack>
</Container>

Variant values

sizeMax-width preset bound to `--container-*` tokens.

smcapped width

mdcapped width

lgcapped width

xlcapped width

fullcapped width

Value	Description
`sm`	33rem (≈530px) — narrow column for short content.
`md`	40rem (≈640px) — comfortable reading width.
`lg`default	50rem (≈800px) — default; standard article width.
`xl`	66rem (≈1056px) — wider canvas for dashboards or marketing.
`full`	100% — disable max-width clamp.

paddingHorizontal padding bound to `--space-*` tokens.

none

sm

md

lg

Value	Description
`none`	0 — flush to container edges.
`sm`	0.75rem — tight gutter.
`md`default	1rem — default; standard reading gutter.
`lg`	2rem — generous gutter for marketing pages.

API Reference

Prop	Type	Default	Description
`size`	`"sm" \| "md" \| "lg" \| "xl" \| "full"`	lg	Max-width preset bound to `--container-*` tokens (sm=33rem, md=40rem, lg=50rem, xl=66rem, full=100%).
`padding`	`"none" \| "sm" \| "md" \| "lg"`	md	Horizontal padding bound to `--space-*` tokens (none=0, sm=0.75rem, md=1rem, lg=2rem).
`asChild`	`boolean`	false	Render as a different element via Radix `Slot`. Use to render as `<main>`, `<section>`, etc. for landmark semantics.

AI Guidance

When to use

Use to constrain page content to readable widths. Pair with `Stack` or `Grid` inside for vertical/grid layouts. Default for any centered article, settings page, or marketing section.

When not to use

Don't use inside another `Container` (double-clamping). Don't use as a drop-in for `<main>` semantics — it's a layout primitive, not a landmark. For full-bleed sections (edge-to-edge banners), pass `size="full" padding="none"`.

Common mistakes

Wrapping a `Container` in another `Container` and getting an unexpectedly narrow column
Using `padding="none"` and forgetting that children still need their own gutter — the parent contributes nothing
Treating `lg` as the largest size — `xl` (66rem) and `full` are bigger

Accessibility

Container is presentational. Wrap in a semantic landmark (`<main>`, `<section>`, `<article>`) when the page structure needs it; Container itself renders a plain `<div>`.

Related components

Token budget: 250

Verified against @hex-core/components@1.12.0

Edit this page on GitHub