React Chakra UI Container Example

In this tutorial, we will see container using Chakra UI and React. We will create chakra ui container component, chakra ui container size and custom container size example with react Chakra UI.

Install & Setup Vite + React + Typescript + Chakra UI

How to Use Chakra UI in Next.JS 13

React Chakra UI Container Example

1. react chakra ui default container.

import { Container } from "@chakra-ui/react";

export default function App() {
  return (
    <Container bg='blue.500' color='white'>
      Default Container
    </Container>
  );
}

chakra ui default container

2. react chakra ui container with sizes props "2xl","xl", "lg", "md", "sm",.

import { Container, VStack } from "@chakra-ui/react";

export default function App() {
  return (
    <>
      <VStack>
        <Container maxW="sm" bg="blue.600" color="white">
          "sm" Container
        </Container>
        <Container maxW="md" bg="blue.500" color="white">
          "md" Container
        </Container>
        <Container maxW="lg" bg="blue.400" color="white">
          "lg" Container
        </Container>
        <Container maxW="xl" bg="blue.300" color="white">
          "xl" Container
        </Container>
        <Container maxW="2xl" bg="blue.200" color="white">
          "2xl" Container
        </Container>
      </VStack>
    </>
  );
}

chakra ui container with sizes

3. react chakra ui container custom sizes.

import { Container, VStack } from "@chakra-ui/react";

export default function App() {
  return (
    <>
      <VStack>
        <Container maxW="650px" bg="blue.600" color="white">
          "650px" Container Custom Size
        </Container>
        <Container maxW="750px" bg="blue.500" color="white">
          "750px" Container Custom Size
        </Container>
        <Container maxW="850px" bg="blue.500" color="white">
          "850px" Container Custom Size
        </Container>
      </VStack>
    </>
  );
}

chakra ui container custom sizes px

4. react chakra ui container Centering the children using centerContent prop.

import { Box, Container } from "@chakra-ui/react";

export default function App() {
  return (
    <>
      <Container maxW="2xl" bg="blue.600" centerContent>
        <Box padding="4" bg="blue.400" color="black" maxW="md">
          You can use the centerContent prop to center the content. It renders a
          flexbox with flexDirection set to column and alignItems set to center.
        </Box>
      </Container>
    </>
  );
}