Layout
Container
Centered, max-width content container that caps line length and page gutters.
Install
npx shadcn@latest add @alix/containerPreview
width="md" — capped and centered
Usage
<Container width="md">
Page content
</Container>Examples
01
The width scale
Each step caps the content at a wider measure and centers it — the same scale keeps line length readable across every page.
width="sm"
width="md"
width="lg"
{(["sm", "md", "lg"] as const).map((width) => (
<Container key={width} width={width}>
width="{width}"
</Container>
))}02
Surface treatments
bgColor paints the container and remaps text tokens for legibility, so copy stays readable on the navy anchor as well as on default.
On the navy surface, foreground and muted text remap to light so the same copy stays legible.
The sand surface keeps the dark ink; both are driven by one bgColor prop.
<Container width="md" bgColor="primary" className="p-6">
<Text variant="body">On the navy surface, text remaps to light.</Text>
</Container>
<Container width="md" bgColor="sand" className="p-6">
<Text variant="body">The sand surface keeps the dark ink.</Text>
</Container>03
As a page section
The common job: render a semantic section, cap its measure, and let the type scale fill it.
Where value is won or lost
Capping line length is a legibility decision, not a stylistic one — long measures tire the reader before the argument lands.
<Container width="lg" render={<section />}>
<Text variant="headingMd" render={<h2 />}>Where value is won or lost</Text>
<Text variant="body">
Capping line length is a legibility decision, not a stylistic one.
</Text>
</Container>When to use it
Use it for
- Capping the measure of a page section so line length stays readable, centered in its gutters.
- Painting a full-bleed section surface with bgColor — the navy anchor or the sand tone — with the text remap handled for you.
- Swapping in a semantic element with render so the container is also the section landmark.
Reach for something else
- Spacing a run of children — Container caps width only; use Stack or Grid for the internal rhythm.
- Framing media to a shape — use AspectRatio or MediaBanner.
- Using gold as a section surface; bgColor's gradients aside, gold is a control token, never a page background.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| width | "sm" | "md" | "lg" | "xl" | "2xl" | "full" | "full" | Max-width cap from the container scale; full opts out of any cap. |
| minHeight | "none" | "md" | "lg" | "xl" | "2xl" | "none" | Minimum height from the container scale; none opts out. |
| bgColor | "default" | "primary" | "secondary" | "sand" | "greyGradient" | "goldGradient" | "default" | Surface treatment — background plus legibility remap on dark surfaces. |
| render | ReactElement | — | Swaps the rendered element (e.g. a section) without losing the styling. |