Container

The container component let you use our default max-width and center the content on the page.

API reference

Examples

Simple

A simple example of how to use the Container component.

<Container>
  <Box>Hello World</Box>
  <Box>Hello World</Box>
  <Box>Hello World</Box>
</Container>

Responsive padding & margin

The Container component also supports responsive values, making it easy to create responsive designs.

<Container paddingY={{ xs: 'sm', md: 'md' }}>
  <Box>Hello World</Box>
  <Box>Hello World</Box>
  <Box>Hello World</Box>
</Container>