---
title: Container
description: "`Container`は、汎用的な区分要素として使用するコンポーネントです。デフォルトでは、`section`要素をレンダリングします。"
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）</Heading>
  </Container.Header>

  <Container.Body color="fg.muted">
    <Text>
      『ドラゴンボール』（DRAGON
      BALL）は、鳥山明による日本の漫画作品。『週刊少年ジャンプ』（集英社）にて1984年51号から1995年25号まで連載された。世界中に散らばった七つの球をすべて集めると、どんな願いも一つだけ叶えられるという秘宝・ドラゴンボールと、主人公・孫悟空（そん・ごくう）を中心に展開する、「冒険」「夢」「バトル」「友情」などを描いた長編漫画。
    </Text>
  </Container.Body>
</Container.Root>
```

## 使い方

```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>
```

### バリアントを変更する

```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>
```

### サイズを変更する

```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>
```

### カラースキームを変更する

```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>
```

### 子要素を中央寄せにする

```tsx
<Container.Root centerContent>
  <Container.Header flexDirection="column">
    <Image
      src="https://dragon-ball-official.com/assets/img/intro/intro_2.png"
      alt="ドラゴンボール"
      maxW="sm"
    />

    <Heading size="xl">『ドラゴンボール』（DRAGON BALL）</Heading>
  </Container.Header>

  <Container.Body color="fg.muted">
    <Text>
      『ドラゴンボール』（DRAGON
      BALL）は、鳥山明による日本の漫画作品。『週刊少年ジャンプ』（集英社）にて1984年51号から1995年25号まで連載された。世界中に散らばった七つの球をすべて集めると、どんな願いも一つだけ叶えられるという秘宝・ドラゴンボールと、主人公・孫悟空（そん・ごくう）を中心に展開する、「冒険」「夢」「バトル」「友情」などを描いた長編漫画。
    </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.                |