Container

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

Source: packages/chakra-ui-solid/src/components/containerChakra UI ↗

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

import { Container } from "chakra-ui-solid";
import { DecorativeBox } from "../components/decorative-box";

export default function 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>
  );
}

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.

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

import { Container, Stack } from "chakra-ui-solid";
import { DecorativeBox } from "../components/decorative-box";

/**
 * The four written out, where the React version maps over a list.
 *
 * `maxW` is a style prop, and Panda generates its rule by reading this file — so a size it can only
 * know at runtime reaches the element as a class with no rule, and the container renders at its
 * default width (`CLAUDE.md`, *The hazard*).
 */
export default function ContainerWithSizes() {
  return (
    <Stack>
      <Container maxW="sm" px="2">
        <SampleText />
      </Container>

      <Container maxW="md" px="2">
        <SampleText />
      </Container>

      <Container maxW="xl" px="2">
        <SampleText />
      </Container>

      <Container maxW="2xl" px="2">
        <SampleText />
      </Container>
    </Stack>
  );
}

const SampleText = () => (
  <DecorativeBox>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam consectetur, tortor in lacinia
    eleifend, dui nisl tristique nunc.
  </DecorativeBox>
);

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.

import { Container } from "chakra-ui-solid";
import { DecorativeBox } from "../components/decorative-box";

export default function 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>
  );
}

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.
`as`	—	`ValidComponent` The element or component to render instead of the default one.
`render`	—	`(props) => JSX.Element` Render an element of your own, given the computed props. A function, never an element — Solid has no `cloneElement`, so an element could only be rendered with its props dropped.
`unstyled`	—	`boolean` Drop the component's own styles. Style props and the `css` prop still apply — the opt-out is of the theme, not of styling.

Plus everything it inherits: HTMLChakraProps<"div">. Those are the whole style-prop surface and the DOM attributes of the element it renders — several hundred names, listed here as their sources rather than expanded.

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.