Container

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

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

Chakra UI Pro: Start your application or marketing site with a growing collection of beautiful and responsive UI components.

Ads via Chakra UI

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#

To set the size of a Container, use the maxW attribute.

<VStack>
  <Container maxW="container.xl">Extra-Large Container</Container>
  <Container maxW="container.lg">Large Container</Container>
  <Container maxW="container.md">Medium Container</Container>
  <Container maxW="container.sm">Small 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.

<Container maxW="xl" centerContent>
  <Box padding="4" bg="gray.100" maxW="3xl">
    There are many benefits to a joint design and development system. Not only
    does it bring benefits to the design team.
  </Box>
</Container>

Props#

Container composes Box so you can pass all Box related props in addition to this.

`centerContent`

Description

If true, container will center its children regardless of their width.

Type

boolean

`colorScheme`

Description

Color Schemes for Container are not implemented in the default theme. You can extend the theme to implement them.

Type

"whiteAlpha" | "blackAlpha" | "gray" | "red" | "orange" | "yellow" | "green" | "teal" | "blue" | "cyan" | "purple" | "pink" | "linkedin" | "facebook" | "messenger" | "whatsapp" | "twitter" | "telegram"

`size`

Description

Sizes for Container are not implemented in the default theme. You can extend the theme to implement them.

Type

string

`variant`

Description

Variants for Container are not implemented in the default theme. You can extend the theme to implement them.

Type

string

Edit this page