React Mantine Container Example

Follow this tutorial to learn how to use container in react mantine core ui. We will create default container, container props sizes small, medium large etc, we will see how to customize container sizes using react mantine.

Install & Setup Vite + React + Typescript + Mantine UI

How to Use Mantine in Next.JS 13

React Mantine Core UI Container Example

1. react mantine default container.

import { Container } from '@mantine/core';

export default function App() {
  return (
    <>
      <Container>
        Default Container
      </Container>
    </>
  );
}

react mantine default container

2. react mantine container sizes large, medium, small, extra small with props size="xl", "lg", "md", "sm","xs".

import { Container } from '@mantine/core';

export default function App() {
  return (
    <>
      <Container
        sx={{ backgroundColor: '#eee', padding: '10px' }}
        size="xl"
        mt={20}
      >
        Large Size Container
      </Container>
      <Container
        sx={{ backgroundColor: '#eee', padding: '10px' }}
        size="lg"
        mt={20}
      >
        Large Size Container
      </Container>
      <Container
        sx={{ backgroundColor: '#eee', padding: '10px' }}
        size="md"
        mt={20}
      >
        Medium Size Container
      </Container>
      <Container
        sx={{ backgroundColor: '#eee', padding: '10px' }}
        size="sm"
        mt={20}
      >
        Small Size Container
      </Container>
      <Container
        sx={{ backgroundColor: '#eee', padding: '10px' }}
        size="xs"
        mt={20}
      >
        Extra Small Size Container
      </Container>
    </>
  );
}

react mantine container sizes large, medium, small, extra small

3. react mantine container sizes customize with MantineProvider.

import { Container, MantineProvider } from '@mantine/core';

export default function App() {
  return (
    <>
      <MantineProvider
      theme={{
        components: {
          Container: {
            defaultProps: {
              sizes: {
                xs: 600,
                sm: 800,
                md: 1000,
                lg: 1200,
                xl: 1400,
              },
            },
          },
        },
      }}
    >
      <Container size="xs" sx={{ backgroundColor: '#eee', padding: '10px' }}>
        Container size customize
      </Container>
      <Container size="sm" sx={{ backgroundColor: '#eee', padding: '10px' }}>
        Container size customize
      </Container>
      <Container size="md" sx={{ backgroundColor: '#eee', padding: '10px' }}>
        Container size customize
      </Container>
      <Container size="lg" sx={{ backgroundColor: '#eee', padding: '10px' }}>
        Container size customize
      </Container>
      <Container size="xl" sx={{ backgroundColor: '#eee', padding: '10px' }}>
        Container size customize
      </Container>
    </MantineProvider>
    </>
  );
}