Container
Centers content horizontally and constrains it to a maximum width. Use size with a token or explicit pixel value, or set fluid to remove the cap entirely.
Sizes
size="xs"
size="sm"
size="md"
size="lg"
size="xl"
<Container size="xs">xs — 320px</Container>
<Container size="sm">sm — 480px</Container>
<Container size="md">md — 640px</Container>
<Container size="lg">lg — 960px</Container>
<Container size="xl">xl — 1280px</Container>Explicit pixel width
size=400 — 400px max-width
<Container size={400}>400px max-width</Container>Fluid
fluid — full parent width
<Container fluid>full parent width, no cap</Container>Props
| Prop | Type | Default | Description |
|---|---|---|---|
size | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | number | string | — | Max-width token, pixel number, or CSS value. Ignored when fluid is set. |
fluid | boolean | false | Removes max-width constraint |
strategy | 'block' | 'inline' | 'block' | Containment axis for the size cap |
component | string | 'div' | Root HTML element |