Container
The page's measure: one max width and one gutter, applied consistently.
@luc/ui/layoutExamples
Width modes
`content` is the page's own column, `prose` a readable line, `full` whatever the parent gives it. The numbers are the boxes the browser actually produced in this column — so `content` and `full` agree here, and the two stop agreeing as soon as the window is wider than the column below them.
The page column: at most 76rem, then the viewport.
content box—
A readable line: 44rem, the same measure the prose pages use.
content box—
No maximum of its own: it takes the width it is given.
content box—
<Container width="content">…</Container>
<Container width="prose">…</Container>
<Container width="full">…</Container>Gutters
The gutter is the horizontal padding, and it is the difference between these two numbers: the content box is measured inside it, so switching it off returns exactly two paddings to the content.
gutter on
content box—
gutter off
content box—
<Container gutter>…</Container>
<Container gutter={false}>…</Container>Nesting
A container inside a container is not a mistake: the inner one takes the narrower of the two measures and centres itself in it, which is how a readable paragraph sits inside a wide page column.
The inner measure wins where it is narrower, and the outer one is what stops the page growing on a very wide screen.
inner content box—
<Container width="content">
<Card className="p-4">
<Container width="prose">…</Container>
</Card>
</Container>A page shell
What the component is for: one column, one gutter, and the sections inside it spaced by `Stack` rather than each one inventing its own padding.
Overview
Four measurements, one lookback.
Return
Volatility
Sharpe
Drawdown
Constituents
Sixty-one instruments, quarterly rebalance.
US large cap
<Container width="content">
<Stack gap="xl">
<Section title="Overview" description="Four measurements, one lookback.">
<Grid columns={4} gap="md">…</Grid>
</Section>
<Section title="Constituents">…</Section>
</Stack>
</Container>Usage
import { Container, Stack } from "@luc/ui/layout";<Container width="content">
<Stack gap="xl">…</Stack>
</Container>`width` picks the measure and `gutter` the horizontal padding; a page uses one Container, at its top.
Package setup — peer requirements, the stylesheet and the provider — is on installation.
API
Read from the published TypeScript API, so a prop that is not listed here does not exist and a default that is listed is the one the compiler sees.
| Export | Kind | Signature |
|---|---|---|
Container | 2 documented props | ({ className, width, gutter, ...props }: ContainerProps) => import("@types/react").JSX.Element |
Container props
Type: ContainerProps
Values the compiler reads from the declaration.
| Prop | Type | Default | Notes |
|---|---|---|---|
gutter? | boolean | undefined | — | Horizontal padding. `false` when the caller owns the gutter. |
width? | "content" | "full" | "prose" | undefined | — |
Guidelines
Do
- Use one `Container` per page, near the top, and nothing else that sets a max width — a nested maximum is how a page ends up with three different measures.
- Reach for `width="prose"` on a page that is only text, and `content` for anything holding panels, grids or tables.
- Switch `gutter` off only inside a surface that already carries its own padding, such as a full-bleed `Panel`.
Don't
- Do not use a `Container` to centre one card or one control: that is a `Stack` with an alignment, or a width on the single element.
- Do not compensate for the gutter with a negative margin on a child — `gutter={false}` says the same thing without hiding it.
- Do not nest two containers to make a narrower column: the narrower measure is what `width="prose"` is for.
Accessibility
A `Container` is a `<div>`: no role, no keyboard behaviour, no landmark. It is measure and padding only, so the page's landmarks and heading order come from the elements the page chooses — and a container cannot supply them on its behalf.
Family
Layout
Space, rhythm and the surfaces a page is made of.
10 documented entries in this family. Open the family index
Related