Container
Used to constrain a content's width to the current breakpoint, while keeping it fluid.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam consectetur, tortor in lacinia eleifend, dui nisl tristique nunc.
'use client'
import { Container } from '@chakra-ui/react'
import { DecorativeBox } from 'compositions/lib/decorative-box'
export const ContainerBasic = () => {
return (
<Container>
<DecorativeBox px="2">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam
consectetur, tortor in lacinia eleifend, dui nisl tristique nunc.
</DecorativeBox>
</Container>
)
}
The default maxWidth is 8xl which maps to 90rem (1440px).
import { Container } from "@chakra-ui/react"<Container>
<div />
</Container>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.
'use client'
import { Container, For, Stack } from '@chakra-ui/react'
import { DecorativeBox } from 'compositions/lib/decorative-box'
export const ContainerWithSizes = () => {
return (
<Stack>
<For each={['sm', 'md', 'xl', '2xl']}>
{(size) => (
<Container key={size} maxW={size} px="2">
<DecorativeBox>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam
consectetur, tortor in lacinia eleifend, dui nisl tristique nunc.
</DecorativeBox>
</Container>
)}
</For>
</Stack>
)
}
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.
'use client'
import { Container } from '@chakra-ui/react'
import { DecorativeBox } from 'compositions/lib/decorative-box'
export const ContainerWithFluid = () => {
return (
<Container fluid>
<DecorativeBox px="2">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam
consectetur, tortor in lacinia eleifend, dui nisl tristique nunc.
</DecorativeBox>
</Container>
)
}
| Prop | Default | Type |
|---|---|---|
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 |