diff --git a/components/content/examples/wrap/AlignWrap.vue b/components/content/examples/wrap/AlignWrap.vue
new file mode 100644
index 0000000..765aede
--- /dev/null
+++ b/components/content/examples/wrap/AlignWrap.vue
@@ -0,0 +1,29 @@
+
+
+
+
+ Box 1
+
+
+
+
+ Box 2
+
+
+
+
+ Box 3
+
+
+
+
+ Box 4
+
+
+
+
+ Box 5
+
+
+
+
\ No newline at end of file
diff --git a/components/content/examples/wrap/JustifyWrap.vue b/components/content/examples/wrap/JustifyWrap.vue
new file mode 100644
index 0000000..5d9269c
--- /dev/null
+++ b/components/content/examples/wrap/JustifyWrap.vue
@@ -0,0 +1,29 @@
+
+
+
+
+ Box 1
+
+
+
+
+ Box 2
+
+
+
+
+ Box 3
+
+
+
+
+ Box 4
+
+
+
+
+ Box 5
+
+
+
+
\ No newline at end of file
diff --git a/components/content/examples/wrap/SimpleWrap.vue b/components/content/examples/wrap/SimpleWrap.vue
new file mode 100644
index 0000000..5dfe29d
--- /dev/null
+++ b/components/content/examples/wrap/SimpleWrap.vue
@@ -0,0 +1,29 @@
+
+
+
+
+ Box 1
+
+
+
+
+ Box 2
+
+
+
+
+ Box 3
+
+
+
+
+ Box 4
+
+
+
+
+ Box 5
+
+
+
+
\ No newline at end of file
diff --git a/components/content/examples/wrap/SpacingWrap.vue b/components/content/examples/wrap/SpacingWrap.vue
new file mode 100644
index 0000000..5bcca14
--- /dev/null
+++ b/components/content/examples/wrap/SpacingWrap.vue
@@ -0,0 +1,29 @@
+
+
+
+
+ Box 1
+
+
+
+
+ Box 2
+
+
+
+
+ Box 3
+
+
+
+
+ Box 4
+
+
+
+
+ Box 5
+
+
+
+
\ No newline at end of file
diff --git a/content/4.components/wrap.md b/content/4.components/wrap.md
new file mode 100644
index 0000000..ce744d3
--- /dev/null
+++ b/content/4.components/wrap.md
@@ -0,0 +1,176 @@
+---
+title: Wrap
+description: Wrap component
+version: 2.0+
+---
+
+# Wrap
+
+Wrap is a layout component used to add space between elements and wraps automatically if there isn't enough space.
+
+## Import
+
+```js
+import { CWrap, CWrapItem } from '@chakra-ui/vue-next';
+```
+
+- Wrap: Wrap composes the Box component and renders a tag
+- WrapItem: WrapItem composes the Box component and renders the HTML - tag
+
+## Usage
+
+The Wrap component is a `flex` box container that can wrap its children onto multiple lines with `flex-wrap` and `spacing` support. It is useful for displaying elements that are typically placed side-by-side, such as dialog buttons, tags, and chips.
+
+The example below shows how the last `Box` component wraps to the next line because there is not enough space to fit it on the same line as the other Box components.
+
+::showcase
+::simple-wrap
+::
+::
+
+```html
+
+
+
+ Box 1
+
+
+
+
+ Box 2
+
+
+
+
+ Box 3
+
+
+
+
+ Box 4
+
+
+
+
+ Box 5
+
+
+
+```
+
+## Change the spacing
+
+To ensure that the spacing between each child is consistent, even if the children wrap, pass the `spacing` prop.
+
+> Pro Tip: You can pass responsive values for the spacing.
+
+::showcase
+::spacing-wrap
+::
+::
+
+```html
+
+
+
+ Box 1
+
+
+
+
+ Box 2
+
+
+
+
+ Box 3
+
+
+
+
+ Box 4
+
+
+
+
+ Box 5
+
+
+
+```
+
+## Change the alignment
+
+The `align` prop can be used to change the alignment of a child along the cross axis.
+
+::showcase
+::align-wrap
+::
+::
+
+```html
+
+
+
+ Box 1
+
+
+
+
+ Box 2
+
+
+
+
+ Box 3
+
+
+
+
+ Box 4
+
+
+
+
+ Box 5
+
+
+
+```
+The `justify` prop specifies the alignment of a child along the main axis.
+
+::showcase
+::justify-wrap
+::
+::
+
+```html
+
+
+
+ Box 1
+
+
+
+
+ Box 2
+
+
+
+
+ Box 3
+
+
+
+
+ Box 4
+
+
+
+
+ Box 5
+
+
+
+```
+