Container

The Container component centers content within a responsive maximum width and provides optional horizontal padding.

Usage & Examples

Constrained Content

Contained contentThis surface stays within a medium-width content area.

constrained-content.tsx

const tileStyle = {
  boxSizing: "border-box",
  display: "flex",
  flexDirection: "column",
  justifyContent: "center",
  width: "100%",
  height: "100%",
  minHeight: "4.5rem",
  padding: "1rem",
  border: "1px solid var(--border-color)",
  borderRadius: "var(--border-radius-md, 0.75rem)",
  background: "var(--background-color-surface)",
};

<Container size="md" padded>
  <div style={tileStyle}>
    <strong>Contained content</strong>
    <span>This surface stays within a medium-width content area.</span>
  </div>
</Container>

Visual variants

Sizes

Contained contentThis surface stays within a medium-width content area.

small

Contained contentThis surface stays within a medium-width content area.

medium

Contained contentThis surface stays within a medium-width content area.

large

Contained contentThis surface stays within a medium-width content area.

visual-variants.tsx

// Sizes
const tileStyle = {
  boxSizing: "border-box",
  display: "flex",
  flexDirection: "column",
  justifyContent: "center",
  width: "100%",
  height: "100%",
  minHeight: "4.5rem",
  padding: "1rem",
  border: "1px solid var(--border-color)",
  borderRadius: "var(--border-radius-md, 0.75rem)",
  background: "var(--background-color-surface)",
};

<Container size="xs" size="md" padded>
  <div style={tileStyle}>
    <strong>Contained content</strong>
    <span>This surface stays within a medium-width content area.</span>
  </div>
</Container>
const tileStyle = {
  boxSizing: "border-box",
  display: "flex",
  flexDirection: "column",
  justifyContent: "center",
  width: "100%",
  height: "100%",
  minHeight: "4.5rem",
  padding: "1rem",
  border: "1px solid var(--border-color)",
  borderRadius: "var(--border-radius-md, 0.75rem)",
  background: "var(--background-color-surface)",
};

<Container size="small" size="md" padded>
  <div style={tileStyle}>
    <strong>Contained content</strong>
    <span>This surface stays within a medium-width content area.</span>
  </div>
</Container>
const tileStyle = {
  boxSizing: "border-box",
  display: "flex",
  flexDirection: "column",
  justifyContent: "center",
  width: "100%",
  height: "100%",
  minHeight: "4.5rem",
  padding: "1rem",
  border: "1px solid var(--border-color)",
  borderRadius: "var(--border-radius-md, 0.75rem)",
  background: "var(--background-color-surface)",
};

<Container size="medium" size="md" padded>
  <div style={tileStyle}>
    <strong>Contained content</strong>
    <span>This surface stays within a medium-width content area.</span>
  </div>
</Container>
const tileStyle = {
  boxSizing: "border-box",
  display: "flex",
  flexDirection: "column",
  justifyContent: "center",
  width: "100%",
  height: "100%",
  minHeight: "4.5rem",
  padding: "1rem",
  border: "1px solid var(--border-color)",
  borderRadius: "var(--border-radius-md, 0.75rem)",
  background: "var(--background-color-surface)",
};

<Container size="large" size="md" padded>
  <div style={tileStyle}>
    <strong>Contained content</strong>
    <span>This surface stays within a medium-width content area.</span>
  </div>
</Container>

Props API

Container props API
				Default	Description
`align`	`LayoutAlign`	No	props	`—`	Align prop for LayoutPrimitive.
`as`	`ElementType`	No	props	`—`	As prop for LayoutPrimitive.
`children`	`ReactNode`	No	props	`—`	Content rendered inside the component.
`className`	`string`	No	styling	`—`	Additional CSS class names for the component root.
`data-testid`	`string`	No	testing	`—`	Test id used to identify the component in tests.
`gap`	`LayoutGap`	No	props	`"md"`	Gap.
`justify`	`LayoutJustify`	No	props	`—`	Justify prop for LayoutPrimitive.
`padded`	`boolean`	No	props	`false`	Padded.
`size`	`"sm" \| "md" \| "lg" \| "xl" \| "full"`	No	styling	`"lg"`	Size.
`testId`	`string`	No	props	`—`	Test id used to identify the component in tests.