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 change the container size tokens defined in theme.sizes.container


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

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
Editable Example

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 composes Box so you can pass all Box related props in addition to this.

centerContentbooleanIf true, it'll center child elements based on their content width
Edit this page

Made byChakraandRock Content