diff --git a/packages/docs/docs/.vuepress/configs/components.ts b/packages/docs/docs/.vuepress/configs/components.ts
index f9680e3037..3db1fee291 100644
--- a/packages/docs/docs/.vuepress/configs/components.ts
+++ b/packages/docs/docs/.vuepress/configs/components.ts
@@ -15,6 +15,7 @@ export const components = {
         '/components/maz-phone-number-input.md',
         '/components/maz-select.md',
         '/components/maz-slider.md',
+        '/components/maz-switch.md',
       ]
     },
     {
diff --git a/packages/docs/docs/.vuepress/styles/index.scss b/packages/docs/docs/.vuepress/styles/index.scss
index 58ca83f389..6d6afd5c2d 100644
--- a/packages/docs/docs/.vuepress/styles/index.scss
+++ b/packages/docs/docs/.vuepress/styles/index.scss
@@ -117,6 +117,18 @@ code {
   font-size: .85em;
 }
 
+.token.tag {
+  color: var(--maz-color-danger);
+}
+
+.token.attr-name {
+  color:#4EC9B0;
+}
+
+.token.attr-value {
+  color: var(--maz-bg-color-light-light);
+}
+
 .flex {
   display: flex;
 }
diff --git a/packages/docs/docs/components/maz-checkbox.md b/packages/docs/docs/components/maz-checkbox.md
index 220b70e8ad..bc07fbe4b8 100644
--- a/packages/docs/docs/components/maz-checkbox.md
+++ b/packages/docs/docs/components/maz-checkbox.md
@@ -35,9 +35,9 @@ description: MazCheckbox is a stand-alone component replaces the standard html i
 </template>
 
 <script lang="ts" setup>
-  import { MazCheckbox } from 'vue'
-
   import { ref } from 'vue'
+  import MazCheckbox from 'maz-ui/components/MazCheckbox'
+
   const inputValue = ref(false)
 
   const colors = [
diff --git a/packages/docs/docs/components/maz-switch.md b/packages/docs/docs/components/maz-switch.md
new file mode 100644
index 0000000000..2fa0bd897d
--- /dev/null
+++ b/packages/docs/docs/components/maz-switch.md
@@ -0,0 +1,62 @@
+---
+description: MazSwitch is a stand-alone component replaces the standard html input checkbox. Color option available.
+---
+
+# MazSwitch
+
+> Before you have to import the global css files in your project, follow instructions in [Getting Started](/maz-ui-3/guide/getting-started.html)
+
+<MazSwitch
+  v-for="color in colors"
+  v-model="switchValue"
+  :color="color"
+  :name="color"
+  :key="color"
+  style="margin-bottom: 12px;"
+/>
+
+<script lang="ts" setup>
+  import { ref } from 'vue'
+  const switchValue = ref(false)
+
+  const colors = [
+    'primary',
+    'secondary',
+    'info',
+    'success',
+    'warning',
+    'danger',
+  ]
+</script>
+
+```vue
+<template>
+  <MazSwitch
+    v-for="color in colors"
+    v-model="switchValue"
+    :color="color"
+    :name="color"
+    :key="color"
+  />
+</template>
+
+<script lang="ts" setup>
+  import { ref } from 'vue'
+  import MazSwitch from 'maz-ui/components/MazSwitch'
+
+  const switchValue = ref(false)
+
+  const colors = [
+    'primary',
+    'secondary',
+    'info',
+    'success',
+    'warning',
+    'danger',
+  ]
+</script>
+```
+
+## Props & Events emitted
+
+<ComponentPropDoc component="MazSwitch" />
\ No newline at end of file