diff --git a/components/content/examples/container/ContainerCenter.vue b/components/content/examples/container/ContainerCenter.vue
new file mode 100644
index 0000000..d337914
--- /dev/null
+++ b/components/content/examples/container/ContainerCenter.vue
@@ -0,0 +1,10 @@
+
+
+
+ There are many benefits to a joint design and development system. Not only
+ does it bring benefits to the design team, but it also brings benefits to
+ engineering teams. It makes sure that our experiences have a consistent look
+ and feel, not just in our design specs, but in production.
+
+
+
\ No newline at end of file
diff --git a/components/content/examples/container/ContainerSize.vue b/components/content/examples/container/ContainerSize.vue
new file mode 100644
index 0000000..6b349c3
--- /dev/null
+++ b/components/content/examples/container/ContainerSize.vue
@@ -0,0 +1,13 @@
+
+
+
+ "md" Container
+
+
+ "550px" Container
+
+
+ "container.sm" Container
+
+
+
\ No newline at end of file
diff --git a/components/content/examples/container/SimpleContainer.vue b/components/content/examples/container/SimpleContainer.vue
new file mode 100644
index 0000000..97b5719
--- /dev/null
+++ b/components/content/examples/container/SimpleContainer.vue
@@ -0,0 +1,8 @@
+
+
+ There are many benefits to a joint design and development system. Not only
+ does it bring benefits to the design team, but it also brings benefits to
+ engineering teams. It makes sure that our experiences have a consistent look
+ and feel, not just in our design specs, but in production
+
+
\ No newline at end of file
diff --git a/content/4.components/container.md b/content/4.components/container.md
new file mode 100644
index 0000000..2e6b2f5
--- /dev/null
+++ b/content/4.components/container.md
@@ -0,0 +1,78 @@
+---
+title: Container
+description:
+ Container component is used to constrain a content's width to the current breakpoint, while keeping it fluid.
+version: 2.0+
+---
+
+# Container
+
+Containers are used to constrain a content's width to the current breakpoint, while keeping it fluid.
+
+## Import
+
+```js
+import { CContainer } from '@chakra-ui/vue-next'
+```
+
+## Usage
+
+To contain any piece of content, wrap it in the `CContainer` component.
+
+::showcase
+ ::simple-container
+ ::
+::
+
+```html
+
+ There are many benefits to a joint design and development system. Not only
+ does it bring benefits to the design team, but it also brings benefits to
+ engineering teams. It makes sure that our experiences have a consistent look
+ and feel, not just in our design specs, but in production
+
+```
+
+### Container Size
+
+By default, the `CContainer` component sets the `max-width` of the content to 60 characters (`60ch`) but you can customize this by passing custom `max-width` values or changing the size tokens.
+
+> * About the default value: The `ch` unit is a relative unit defined by the rendered typeface's "0" character width. This width varies by the shape and style of the font.
+> * If you are curious about the reason for this default value of `60` characters, consider this explanation about [line length](https://betterwebtype.com/articles/2019/06/16/5-keys-to-accessible-web-typography/#line-length) from Better Web Type.
+
+::showcase
+ ::container-size
+ ::
+::
+
+```html
+
+
+ "md" Container
+
+
+ "550px" Container
+
+
+ "container.sm" Container
+
+
+```
+
+### Centering the children
+
+In some cases, the width of the content can be smaller than the container's width. You can use the `center-content` prop to center the content. It renders a flexbox with `flex-direction` set to `column` and `align-items` set to `center`.
+::showcase
+ ::container-center
+::
+
+```html
+
+
+ There are many benefits to a joint design and development system. Not only
+ does it bring benefits to the design team, but it also brings benefits to
+ engineering teams. It makes sure that our experiences have a consistent look
+ and feel, not just in our design specs, but in production.
+
+
+```