---
title: Container
description: "`Container` is a component used as a general division element. By default, it renders the `section` element."
links:
  - style: https://github.com/yamada-ui/yamada-ui/tree/main/packages/react/src/components/container/container.style.ts
  - source: https://github.com/yamada-ui/yamada-ui/tree/main/packages/react/src/components/container
  - storybook: https://yamada-ui.github.io/yamada-ui?path=/story/components-container--basic
---

```tsx
<Container.Root>
  <Container.Header>
    <Heading size="xl"> "Dragon Ball" (DRAGON BALL) </Heading>
  </Container.Header>

  <Container.Body color="fg.muted">
    <Text>
      "Dragon Ball" (DRAGON BALL) is a Japanese manga work by Akira Toriyama. It
      was serialized in "Weekly Shonen Jump" (Shueisha) from the 51st issue of
      1984 to the 25th issue of 1995. It is a long manga that depicts
      "adventure", "dream", "battle", "friendship", etc., centered on the
      protagonist, Son Goku, and the treasure, Dragon Ball, which can grant any
      wish if all seven scattered balls are collected.
    </Text>
  </Container.Body>
</Container.Root>
```

## Usage

```tsx
import { Container } from "@yamada-ui/react"
```

```tsx
import { Container } from "@/components/ui"
```

```tsx
import { Container } from "@workspaces/ui"
```

```tsx
<Container.Root>
  <Container.Header />
  <Container.Body />
  <Container.Footer />
</Container.Root>
```

### Change Variant

```tsx
<VStack>
  <For each={["panel", "elevated", "subtle", "solid", "surface", "outline"]}>
    {(variant, index) => (
      <Container.Root variant={variant} key={index}>
        <Container.Header>
          <Heading size="md">Container</Heading>
        </Container.Header>

        <Container.Body>
          <Text>Variant is {variant}</Text>
        </Container.Body>
      </Container.Root>
    )}
  </For>
</VStack>
```

### Change Size

```tsx
<VStack>
  <For each={["sm", "md", "lg", "xl"]}>
    {(size, index) => (
      <Container.Root size={size} key={index}>
        <Container.Header>
          <Heading size={transformSize(size, 2)}>Container</Heading>
        </Container.Header>

        <Container.Body color="fg.muted">
          <Text>Size is {size}</Text>
        </Container.Body>
      </Container.Root>
    )}
  </For>
</VStack>
```

### Change Color Scheme

```tsx
<VStack>
  <For each={["info", "success", "warning", "error"]}>
    {(colorScheme, index) => (
      <Container.Root colorScheme={colorScheme} variant="solid" key={index}>
        <Container.Header>
          <Heading size="md">Container</Heading>
        </Container.Header>

        <Container.Body>
          <Text>ColorScheme is {colorScheme}</Text>
        </Container.Body>
      </Container.Root>
    )}
  </For>
</VStack>
```

### Centering Child Elements

```tsx
<Container.Root centerContent>
  <Container.Header flexDirection="column">
    <Image
      src="https://dragon-ball-official.com/assets/img/intro/intro_2.png"
      alt="Dragon Ball"
      maxW="sm"
    />

    <Heading size="xl"> "Dragon Ball" (DRAGON BALL) </Heading>
  </Container.Header>

  <Container.Body color="fg.muted">
    <Text>
      "Dragon Ball" (DRAGON BALL) is a Japanese manga work by Akira Toriyama. It
      was serialized in "Weekly Shonen Jump" (Shueisha) from the 51st issue of
      1984 to the 25th issue of 1995. It is a long manga that depicts
      "adventure", "dream", "battle", "friendship", etc., centered on the
      protagonist Goku (Son Goku), and the treasure "Dragon Ball" that can grant
      any wish if all seven balls scattered around the world are collected.
    </Text>
  </Container.Body>
</Container.Root>
```

## Props

### Container.Root

| Prop            | Default   | Type                                                                                                                      | Description                                                              |
| --------------- | --------- | ------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------ |
| `as`            | -         | `As`                                                                                                                      | The HTML element to render.                                              |
| `asChild`       | -         | `boolean`                                                                                                                 | Merges its props onto its immediate child.                               |
| `css`           | -         | `CSSObject \| CSSObject[]`                                                                                                | The CSS object.                                                          |
| `colorScheme`   | -         | `"amber" \| "black" \| "blackAlpha" \| "blue" \| "cyan" \| "danger" \| "emerald" \| "error" \| "flashy" \| "fuchsia" ...` | Set color scheme variables.                                              |
| `size`          | `"lg"`    | `"lg" \| "md" \| "sm" \| "xl"`                                                                                            | The size of the component.                                               |
| `variant`       | `"panel"` | `"elevated" \| "outline" \| "panel" \| "solid" \| "subtle" \| "surface" ...`                                              | The variant of the component.                                            |
| `centerContent` | `false`   | `boolean`                                                                                                                 | If `true`, container will center its children regardless of their width. |

### Container.Body

| Prop          | Default | Type                                                                                                                      | Description                                |
| ------------- | ------- | ------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------ |
| `as`          | -       | `As`                                                                                                                      | The HTML element to render.                |
| `asChild`     | -       | `boolean`                                                                                                                 | Merges its props onto its immediate child. |
| `css`         | -       | `CSSObject \| CSSObject[]`                                                                                                | The CSS object.                            |
| `colorScheme` | -       | `"amber" \| "black" \| "blackAlpha" \| "blue" \| "cyan" \| "danger" \| "emerald" \| "error" \| "flashy" \| "fuchsia" ...` | Set color scheme variables.                |

### Container.Footer

| Prop          | Default | Type                                                                                                                      | Description                                |
| ------------- | ------- | ------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------ |
| `as`          | -       | `As`                                                                                                                      | The HTML element to render.                |
| `asChild`     | -       | `boolean`                                                                                                                 | Merges its props onto its immediate child. |
| `css`         | -       | `CSSObject \| CSSObject[]`                                                                                                | The CSS object.                            |
| `colorScheme` | -       | `"amber" \| "black" \| "blackAlpha" \| "blue" \| "cyan" \| "danger" \| "emerald" \| "error" \| "flashy" \| "fuchsia" ...` | Set color scheme variables.                |

### Container.Header

| Prop          | Default | Type                                                                                                                      | Description                                |
| ------------- | ------- | ------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------ |
| `as`          | -       | `As`                                                                                                                      | The HTML element to render.                |
| `asChild`     | -       | `boolean`                                                                                                                 | Merges its props onto its immediate child. |
| `css`         | -       | `CSSObject \| CSSObject[]`                                                                                                | The CSS object.                            |
| `colorScheme` | -       | `"amber" \| "black" \| "blackAlpha" \| "blue" \| "cyan" \| "danger" \| "emerald" \| "error" \| "flashy" \| "fuchsia" ...` | Set color scheme variables.                |