Center content horizontally with predefined max-width


Container is the most basic layout element, it centers content horizontally and adds horizontal padding from theme. Component accepts these props:

  • size – controls default max width
  • padding – controls horizontal padding of container, use xs, sm, md, lg, xl for value defined in theme.spacing or number to set horizontal padding in px
  • fluid – overwrites size prop and sets max width to 100%
Default container
xs container with xs horizontal padding
200px container with 0px horizontal padding
import { Container } from '@mantine/core';
function Demo() {
return (
Default container
<Container size="xs" px="xs">
xs container with xs horizontal padding
<Container size={200} px={0}>
200px container with 0px horizontal padding

Configure sizes

To configure container sizes use default props on MantineProvider:

import { MantineProvider, Container } from '@mantine/core';
function App() {
return (
components: {
Container: {
defaultProps: {
sizes: {
xs: 540,
sm: 720,
md: 960,
lg: 1140,
xl: 1320,
<Container size="sm">Your app</Container>
Download more icon variants from

Container component props

If fluid is set to true, size prop is ignored and Container can expand to 100% of width
number | "xs" | "sm" | "md" | "lg" | "xl"
Predefined container max-width or number for max-width in px
Record<MantineSize, number>
Container sizes