Skip to content
Components

Container

Container centres page content within a max-width and applies the canonical horizontal gutter. It is the RSC-safe page-shell primitive: pair it with Section for vertical rhythm, or pass space to fold the band into one node. Import from "@instruments/materia-ui/components/container".

Page shell

Usage

import { Container, ContainerProps } from "@instruments/materia-ui/components/container";

Best practices

  • Container constrains width and applies the page gutter; Section is the full-bleed vertical-rhythm band - nest a Container inside a Section when content must be both padded and centred.

  • Fold a single band into one node with space (its py) instead of nesting a Section; pass fluid to drop the max-width.

Props

PropTypeDefaultDescription
as"div" | "article" | "aside" | "figcaption" | "figure" | "footer" | "header" | "li" | "main" | "nav" | "ol" | "section" | "span" | "ul"

Render as a different host element from the closed layout vocabulary ({@link LayoutElement}). The set is deliberately closed: as="button" is a type error, because the design-system answer is the Button component. Event handlers and the ref accept any host element. as and render are mutually exclusive; if both are passed, render wins (a dev-only warning fires).

fluidboolean

Drop the max-width and let the container fill its parent.

inset"none" | LayoutResponsiveValue<"base" | "2xs" | "xs" | "sm" | "lg" | "xl" | "2xl" | "3xl"> | "gutter"

Horizontal gutter. Defaults to "gutter" - the single app-wide --page-gutter (16px, 24px from sm) that the header and SidebarInset also use, so page content lines up with the app chrome. Pass "none" for a bare centred column, or a ComponentSize for an explicit non-standard px.

responsiveModeResponsiveMode

Responsive mode: "screen" (viewport) or "container" (container queries).

sizeLayoutResponsiveValue<ContainerSize>

Max-width token. Responsive; defaults to 7xl.

spaceLayoutResponsiveValue<SectionSpace>

Vertical rhythm (py). Responsive; omitted by default.

refLayoutRef | undefined

Ref to the rendered host, whichever element as selects.

Also exports

  • interfaceContainerProps