Back to Components

Layout

Container

Max-width content well with auto margins. Centers a column of content with a token-driven horizontal gutter.

Examples

size=sm

Content stays within 640px and re-centers as the viewport grows.
<Container size="sm">…</Container>

size=lg (default)

The default for marketing pages and docs.
<Container>…</Container>

size=full

Full-bleed section that still keeps the gutter.
<Container size="full">…</Container>

Props

PropTypeDefaultDescription
size'sm' | 'md' | 'lg' | 'xl' | 'full''lg'Max-width tier — 640 / 768 / 1024 / 1280 / none.
...restHTMLAttributes<HTMLDivElement>Spread onto the underlying <div>.

Install

CLI

npx @a3tai/mittsu add container