Container
Used to constrain a content's width to the current breakpoint, while keeping it fluid.
Usage
The default maxWidth is 8xl which maps to 90rem (1440px).
import { Container } from "chakra-ui-solid";<Container>
<div />
</Container>Examples
Sizes
Use the maxWidth prop to change the size of the container.
Fluid
Use the fluid prop to make the container stretch to fill the width of its parent.
Props
| Prop | Default | Type |
|---|---|---|
centerContent | — | ConditionalValue<boolean>Center the content and stack it in a column, rather than leaving the layout to the children. |
fluid | — | ConditionalValue<boolean>Stretch to fill the width of the parent, dropping the `8xl` maximum. |
Plus HTMLChakraProps<"div"> — the whole style-prop surface and the DOM attributes of the element it renders, several hundred names listed as their sources rather than expanded — and the three every component takes: as, render and unstyled.
The table is empty because centerContent and fluid are the recipe’s variants rather than
props an interface here declares.
Container is the only component in this tier styled by a recipe rather than by a style config
on the factory, and the recipe is the one body this port reproduces rather than depends on:
@chakra-ui/panda-preset ships no container key, so @chakra-ui-solid/panda-preset carries it.
The practical consequence is the one the recipe layer buys — a style prop passed alongside beats the
recipe, so <Container px="10"> overrides the responsive padding rather than racing it.