---
title: Container
description:
  Used to constrain a content's width to the current breakpoint, while keeping
  it fluid.
links:
  source: components/container
  storybook: layout-container--basic
  recipe: container
---

<ExampleTabs name="container-basic" />

## Usage

The default `maxWidth` is `8xl` which maps to `90rem (1440px)`.

```jsx
import { Container } from "@chakra-ui/react"
```

```jsx
<Container>
  <div />
</Container>
```

## Examples

### Sizes

Use the `maxWidth` prop to change the size of the container.

<ExampleTabs name="container-with-sizes" />

### Fluid

Use the `fluid` prop to make the container stretch to fill the width of its
parent.

<ExampleTabs name="container-with-fluid" />

## Props

<PropTable component="Container" part="Container" />
