Skip to content
← Inventory

Container

Container centers 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 "@desk/ui/components/container".

Page shell

Usage

import { Container, ContainerProps } from "@desk/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 centered.

  • 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" | "li" | "nav" | "ol" | "span" | "ul" | "article" | "aside" | "figcaption" | "figure" | "footer" | "header" | "main" | "section"

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. Ref and event-handler types remain the default element's (HTMLDivElement). as and asChild are mutually exclusive; if both are passed, asChild wins (a dev-only warning fires).

asChildboolean

Merge props onto the child element instead of rendering a div.

fluidboolean

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

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

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

responsiveModeResponsiveMode

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

sizeResponsiveValue<ContainerSize>

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

spaceResponsiveValue<SectionSpace>

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

Also exports

  • interfaceContainerProps