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

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

Proudly made inNigeria by Segun Adebayo

Deployed by Vercel