Skip to Content
Sponsor

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.

Usage#

To contain any piece of content, wrap it 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.

Props#

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

NameTypeDescriptionDefault
centerContentbooleanIf `true`, container will center its children regardless of their width.-
colorSchemestring-
orientation"horizontal" | "vertical"-
sizestring-
styleConfigRecord<string, any>-
variantstring-
Edit this page