Container
The fixed content measure, centred with the page gutters. One per band — pages in the (content) route group get theirs from the group layout and should not add another.
import Container from '@/components/ui/Container';Source: src/components/ui/Container.tsx
Examples
md and lg
md is the product measure. lg is for pages that need more room — the design system itself uses lg, which is why this page is wider than a store page.
size="md" — the default measure
size="lg"
Props
<Container> props
| Prop | Type | Default | Description |
|---|---|---|---|
as | ElementType | 'div' | — |
size | 'md' | 'lg' | 'md' | — |
childrenrequired | ReactNode | — | — |
Also accepts everything in HTMLAttributes<HTMLElement> — so native attributes (id, onClick, aria-*, data-*) pass straight through.
Usage
Do
- Let the route-group layout provide it for ordinary pages.
Don’t
- Don’t nest a Container in a Container — the gutters double and the content narrows for no reason.
- Don’t use it to centre a single card; that is `mx-auto max-w-[…]` on the card.