Build faster with Premium Chakra UI Components 💎

Learn more
Skip to Content
DocsEnterpriseBlogShowcase
Sponsor

Container

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

SourceStorybookRecipe
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam consectetur, tortor in lacinia eleifend, dui nisl tristique nunc.

Usage

The default maxWidth is 8xl which maps to 90rem (1440px).

import { Container } from "@chakra-ui/react"
<Container>
  <div />
</Container>

Examples

Sizes

Use the maxWidth prop to change the size of the container.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam consectetur, tortor in lacinia eleifend, dui nisl tristique nunc.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam consectetur, tortor in lacinia eleifend, dui nisl tristique nunc.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam consectetur, tortor in lacinia eleifend, dui nisl tristique nunc.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam consectetur, tortor in lacinia eleifend, dui nisl tristique nunc.

Fluid

Use the fluid prop to make the container stretch to fill the width of its parent.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam consectetur, tortor in lacinia eleifend, dui nisl tristique nunc.

Props

PropDefaultType
colorPalette 'gray'
'gray' | 'red' | 'orange' | 'yellow' | 'green' | 'teal' | 'blue' | 'cyan' | 'purple' | 'pink' | 'accent'

The color palette of the component

centerContent
'true' | 'false'

The centerContent of the component

fluid
'true' | 'false'

The fluid of the component

Previous

Center

Next

Flex