Container
Centered max-width wrapper that constrains content to readable widths. Sizes map to `--container-*` prose-width tokens; padding maps to `--space-*`.
Installation
pnpm dlx @hex-core/cli add containerUsage
import { Container } from "@/components/ui/container"Reading-width article
lg size (50rem) + md padding for an article body.
<Container size="lg" padding="md">
<article>...</article>
</Container>Full-width hero
Use size=full when you want the section to span the viewport.
<Container size="full" padding="none">
<Hero />
</Container>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>`.
Token budget: 250