Container

Containers are used to constrain a content's width to the current breakpoint, while keeping it fluid.

Import#

import { Container } from '@chakra-ui/react'

Usage#

To contain any piece of content, wrap it in the Container component.

<Container>
  There are many benefits to a joint design and development system. Not only
  does it bring benefits to the design team, but it also brings benefits to
  engineering teams. It makes sure that our experiences have a consistent look
  and feel, not just in our design specs, but in production
</Container>

Container Size#

By default, the Container component sets the maxWidth of the content to 60 characters (60ch) but you can customize this by passing custom maxWidth values or changing the size tokens defined in theme.sizes.container.

About the default value: The ch unit is a relative unit defined by the rendered typeface's "0" character width. This width varies by the shape and style of the font.

If you are curious about the reason for this default value of 60 characters, consider this explanation about line length from Better Web Type.

<VStack>
  <Container maxW='md' bg='blue.600' color='white'>
    "md" Container
  </Container>
  <Container maxW='550px' bg='purple.600' color='white'>
    "550px" Container
  </Container>
  <Container maxW='container.sm' bg='green.400' color='#262626'>
    "container.sm" Container
  </Container>
</VStack>

Centering the children#

In some cases, the width of the content can be smaller than the container's width. You can use the centerContent prop to center the content. It renders a flexbox with flexDirection set to column and alignItems set to center.

<Container maxW='2xl' bg='blue.600' centerContent>
  <Box padding='4' bg='blue.400' color='black' maxW='md'>
    There are many benefits to a joint design and development system. Not only
    does it bring benefits to the design team, but it also brings benefits to
    engineering teams. It makes sure that our experiences have a consistent look
    and feel, not just in our design specs, but in production.
  </Box>
</Container>

The Container component is a single part component. All of the styling is applied directly to the div element.

To learn more about styling single part components, visit the Component Style page.

Theming properties#

The properties that affect the theming of the Container component are:

variant: The visual variant of the component. Variants for this component are not implemented in the default theme.
colorScheme: The color scheme of the component. Color schemes for this component are not implemented in the default theme.
size: The size of the component. Sizes for this component are not implemented in the default theme.

Theming utilities#

defineStyle: a function used to create style objects.
defineStyleConfig: a function used to define the style configuration for a single part component.

import { defineStyle, defineStyleConfig } from '@chakra-ui/react'

Customizing the default theme#

import { defineStyle, defineStyleConfig } from '@chakra-ui/react'

// define the base component styles
const baseStyle = {
  borderRadius: 'xl', // add a border radius
  fontWeight: 'medium', // change the font weight
}

// export the component theme
export const containerTheme = defineStyleConfig({ baseStyle })

After customizing the default theme, we can import it in our theme file and add it in the components property.

import { extendTheme } from '@chakra-ui/react'
import { containerTheme } from './components/Container'

const theme = extendTheme({
  components: {
    Container: containerTheme,
  },
})

export default theme

This is a crucial step to make sure that any changes that we make to the container theme are applied.

Adding a custom size#

Let's assume we want to create a small, medium, and large size. For demonstration, we will use a couple of different methods to define the max width. Here's how we can do that:

import { defineStyle, defineStyleConfig } from '@chakra-ui/react'

// define custom sizes
const sizes = {
  sm: defineStyle({
    maxW: '45ch',
    p: '4',
  }),
  md: defineStyle({
    maxW: 'container.sm',
    p: '6',
    fontSize: 'lg',
  }),
  lg: defineStyle({
    maxW: '75ch',
    p: '8',
    fontSize: 'xl',
  }),
}

// export the component theme
export const containerTheme = defineStyleConfig({ sizes })

Every time you're adding anything new to the theme, you need to run the CLI command to get proper autocomplete in your IDE. You can learn more about the CLI tool here.

Adding a custom variant#

Let's assume we want to include a couple of variants: one that can use a color scheme and a bold one that is black and white. Here's how we can do that:

import { defineStyle, defineStyleConfig } from '@chakra-ui/react'

// define styles for custom variant
const colorfulVariant = defineStyle((props) => {
  const { colorScheme: c } = props // add color scheme as a prop
  return {
    _light: {
      bg: `${c}.200`,
      color: `${c}.800`,
    },
    _dark: {
      bg: `${c}.700`,
      color: `${c}.200`,
    },
  }
})

const boldVariant = defineStyle((props) => {
  return {
    borderRadius: 'none',
    border: '2px solid',
    fontFamily: 'mono',
    _light: {
      bg: 'white',
      color: `black`,
    },
    _dark: {
      bg: 'black',
      color: 'white',
    },
  }
})

// define custom variants
const variants = {
  colorful: colorfulVariant,
  bold: boldVariant,
}

// export the component theme
export const containerTheme = defineStyleConfig({ variants })

Using a custom color scheme#

Let's assume we want to use our own custom color scale based on our brand. First, we need to define the color scale in the main theme file:

import { extendTheme } from '@chakra-ui/react';
import { containerTheme } from './components/Container';

const theme = extendTheme({
  // add a custom color scheme
  colors: {
    brand: {
      50: '#dafff3',
      ...
      500: '#13e4b1',
      ...
      900: '#001b0e',
    },
  },

});

export default theme;

Then, we can use the custom color scale as the color scheme for the container:

<Container colorScheme='brand'>...</Container>

Changing the default properties#

Let's assume we want to add a default size, variant, and color scheme of every container in our app. Here's how we can do that:

import { defineStyle, defineStyleConfig } from '@chakra-ui/react'

// define which sizes, variants, and color schemes are applied by default
const defaultProps = {
  size: 'md',
  variant: 'colorful',
  colorScheme: 'brand',
}

// export the component theme
export const containerTheme = defineStyleConfig({ defaultProps })

Showcase#

import React from 'react';
import { ChakraProvider, Box, Container, VStack } from '@chakra-ui/react';
import theme from './theme';
import { ColorModeSwitcher } from './ColorModeSwitcher';

export default function App() {
  return (
    <ChakraProvider theme={theme}>
      <Box position="relative" h="100vh" p={4}>
        <VStack>
          <Container>
            This container has the new theme default properties applied of
            medium size, brand color scheme, and colorful variant.
          </Container>
          <Container size="sm" colorScheme="gray">
            This container has the small size, gray color scheme, and new
            default colorful variant applied.
          </Container>
          <Container size="lg" variant="bold">
            This container has the large size, no color scheme, and the bold
            variant applied.
          </Container>
          <Container size="sm" variant="bold">
            This container has the small size, no color scheme, and the bold
            variant applied.
          </Container>
          <Container size="lg" variant="colorful" colorScheme="blue">
            This container has the new default colorful variant with the large
            size and blue color scheme applied.
          </Container>
        </VStack>
        <ColorModeSwitcher position="fixed" bottom={3} left={3} />
      </Box>
    </ChakraProvider>
  );
}

Edit this page on GitHub