Centered Container

Create a centered, max-width container for reuse in multiple layouts.

<div
  sx={{
    maxWidth: 512,
    mx: 'auto',
    px: 3,
    py: 4,
  }}>
  Centered
</div>
<div
  sx={{
    maxWidth: 512,
    mx: 'auto',
    px: 3,
    py: 4,
  }}>
  Centered
</div>

First, add a container size to your theme, then use the size in your component definition.

// example theme
export default {
  sizes: {
    container: 768,
  },
}

/** @jsxImportSource theme-ui */
// example Container component
export default (props) => (
  <div
    {...props}
    sx={{
      maxWidth: 'container',
      mx: 'auto',
      px: 3,
    }}
  />
)

See also: Container component