diff --git a/components/content/examples/accordion/ExpandedStyle.vue b/components/content/examples/accordion/ExpandedStyle.vue
index 256051a..f8a756b 100644
--- a/components/content/examples/accordion/ExpandedStyle.vue
+++ b/components/content/examples/accordion/ExpandedStyle.vue
@@ -1,22 +1,26 @@
-<template>
-  <c-accordion>
-    <c-accordion-item>
-      <c-accordion-button :_expanded="{ bg: 'purple', color: 'white' }">
-        <c-v-stack align="flex-start" w="full">
-          Watercraft
-        </c-v-stack>
-        <c-accordion-icon element="c-accordion-item" />
-      </c-accordion-button>
-      <c-accordion-panel> Sample accordion content </c-accordion-panel>
-    </c-accordion-item>
-  </c-accordion>
-</template>
 
 <script setup>
 import {
   CAccordion,
+  CAccordionIcon,
   CAccordionItem,
   CAccordionButton,
   CAccordionPanel,
+  CVStack
 } from "@chakra-ui/vue-next"
 </script>
+
+<template>
+  <CAccordion>
+    <CAccordionItem>
+      <CAccordionButton :_expanded="{ bg: 'purple', color: 'white' }">
+        <CVStack align="flex-start" w="full">
+          Watercraft
+        </CVStack>
+        <CAccordionIcon element="c-accordion-item" />
+      </CAccordionButton>
+      <CAccordionPanel> Sample accordion content </CAccordionPanel>
+    </CAccordionItem>
+  </CAccordion>
+</template>
+
diff --git a/components/content/examples/accordion/SimpleAccordion.vue b/components/content/examples/accordion/SimpleAccordion.vue
index f3ec2bb..fd516d3 100644
--- a/components/content/examples/accordion/SimpleAccordion.vue
+++ b/components/content/examples/accordion/SimpleAccordion.vue
@@ -1,40 +1,42 @@
-<template>
-  <c-accordion>
-    <c-accordion-item>
-      <c-accordion-button>
-        <c-v-stack align="flex-start" w="full">
-          Watercraft
-        </c-v-stack>
-        <c-accordion-icon element="c-accordion-item" />
-      </c-accordion-button>
-      <c-accordion-panel> Sample accordion content </c-accordion-panel>
-    </c-accordion-item>
-    <c-accordion-item>
-      <c-accordion-button>
-        <c-v-stack align="flex-start" w="full">
-          Automobiles
-        </c-v-stack>
-        <c-accordion-icon />
-      </c-accordion-button>
-      <c-accordion-panel> Sample accordion content </c-accordion-panel>
-    </c-accordion-item>
-    <c-accordion-item>
-      <c-accordion-button>
-        <c-v-stack align="flex-start" w="full">
-          Aircrafts
-        </c-v-stack>
-        <c-accordion-icon />
-      </c-accordion-button>
-      <c-accordion-panel> Sample accordion content </c-accordion-panel>
-    </c-accordion-item>
-  </c-accordion>
-</template>
-
 <script setup>
 import {
   CAccordion,
+  CAccordionIcon,
   CAccordionItem,
   CAccordionButton,
   CAccordionPanel,
+  CVStack
 } from "@chakra-ui/vue-next"
 </script>
+
+<template>
+  <CAccordion>
+    <CAccordionItem>
+      <CAccordionButton>
+        <CVStack align="flex-start" w="full">
+          Watercraft
+        </CVStack>
+        <CAccordionIcon element="c-accordion-item" />
+      </CAccordionButton>
+      <CAccordionPanel> Sample accordion content </CAccordionPanel>
+    </CAccordionItem>
+    <CAccordionItem>
+      <CAccordionButton>
+        <CVStack align="flex-start" w="full">
+          Automobiles
+        </CVStack>
+        <CAccordionIcon />
+      </CAccordionButton>
+      <CAccordionPanel> Sample accordion content </CAccordionPanel>
+    </CAccordionItem>
+    <CAccordionItem>
+      <CAccordionButton>
+        <CVStack align="flex-start" w="full">
+          Aircrafts
+        </CVStack>
+        <CAccordionIcon />
+      </CAccordionButton>
+      <CAccordionPanel> Sample accordion content </CAccordionPanel>
+    </CAccordionItem>
+  </CAccordion>
+</template>
diff --git a/components/content/examples/alert/AccentAlert.vue b/components/content/examples/alert/AccentAlert.vue
index e9837b5..e487604 100644
--- a/components/content/examples/alert/AccentAlert.vue
+++ b/components/content/examples/alert/AccentAlert.vue
@@ -1,24 +1,25 @@
+<script setup>
+import { CAlert, CAlertDescription, CAlertIcon } from '@chakra-ui/vue-next';
+</script>
+
 <template>
-  <c-alert variant="solid" status="success">
-    <c-alert-icon mr="2" />
-    <c-alert-description> Submitted Successfully! </c-alert-description>
-  </c-alert>
+  <CAlert variant="solid" status="success">
+    <CAlertIcon mr="2" />
+    <CAlertDescription> Submitted Successfully! </CAlertDescription>
+  </CAlert>
 
-  <c-alert variant="subtle" status="success" mb="3">
-    <c-alert-icon mr="2" />
-    <c-alert-description> Submitted Successfully! </c-alert-description>
-  </c-alert>
+  <CAlert variant="subtle" status="success" mb="3">
+    <CAlertIcon mr="2" />
+    <CAlertDescription> Submitted Successfully! </CAlertDescription>
+  </CAlert>
 
-  <c-alert variant="left-accent" status="success" mb="3">
-    <c-alert-icon mr="2" />
-    <c-alert-description> Submitted Successfully! </c-alert-description>
-  </c-alert>
+  <CAlert variant="left-accent" status="success" mb="3">
+    <CAlertIcon mr="2" />
+    <CAlertDescription> Submitted Successfully! </CAlertDescription>
+  </CAlert>
 
-  <c-alert variant="top-accent" status="success" mb="3">
-    <c-alert-icon mr="2" />
-    <c-alert-description> Submitted Successfully! </c-alert-description>
-  </c-alert>
+  <CAlert variant="top-accent" status="success" mb="3">
+    <CAlertIcon mr="2" />
+    <CAlertDescription> Submitted Successfully! </CAlertDescription>
+  </CAlert>
 </template>
-<script setup>
-import { CAlert, CAlertDescription } from '@chakra-ui/vue-next';
-</script>
diff --git a/components/content/examples/alert/Alert.vue b/components/content/examples/alert/Alert.vue
index fac9532..032da08 100644
--- a/components/content/examples/alert/Alert.vue
+++ b/components/content/examples/alert/Alert.vue
@@ -1,10 +1,3 @@
-<template>
-  <c-alert status="success">
-    <c-alert-icon />
-    <c-alert-title>Updated Successfully</c-alert-title>
-    <c-alert-description>Click to view your profile</c-alert-description>
-  </c-alert>
-</template>
 <script setup>
 import {
   CAlert,
@@ -13,3 +6,11 @@ import {
   CAlertDescription
 } from '@chakra-ui/vue-next';
 </script>
+
+<template>
+  <CAlert status="success">
+    <CAlertIcon />
+    <CAlertTitle>Updated Successfully</CAlertTitle>
+    <CAlertDescription>Click to view your profile</CAlertDescription>
+  </CAlert>
+</template>
diff --git a/components/content/examples/alert/BaseAlert.vue b/components/content/examples/alert/BaseAlert.vue
index f563572..6c0c1d3 100644
--- a/components/content/examples/alert/BaseAlert.vue
+++ b/components/content/examples/alert/BaseAlert.vue
@@ -1,16 +1,18 @@
+
+<script setup>
+import { CAlert, CAlertDescription, CAlertTitle } from '@chakra-ui/vue-next';
+</script>
+
 <template>
-  <c-alert
+  <CAlert
     flex-direction="column"
     text-align="left"
     justify-content="start"
     align-items="start"
   >
-    <c-alert-title font-size="md">Updated Successfully</c-alert-title>
-    <c-alert-description font-size="sm"
-      >Click to view your profile</c-alert-description
-    >
-  </c-alert>
+    <CAlertTitle font-size="md">Updated Successfully</CAlertTitle>
+    <CAlertDescription font-size="sm">
+      Click to view your profile
+    </CAlertDescription>
+  </CAlert>
 </template>
-<script setup>
-import { CAlert, CAlertDescription, CAlertTitle } from '@chakra-ui/vue-next';
-</script>
diff --git a/components/content/examples/alert/Composition.vue b/components/content/examples/alert/Composition.vue
index 89ac908..4e741b0 100644
--- a/components/content/examples/alert/Composition.vue
+++ b/components/content/examples/alert/Composition.vue
@@ -1,5 +1,14 @@
+<script setup>
+import {
+  CAlert,
+  CAlertTitle,
+  CAlertDescription,
+  CAlertIcon
+} from '@chakra-ui/vue-next';
+</script>
+
 <template>
-  <c-alert
+  <CAlert
     variant="subtle"
     status="success"
     flex-direction="column"
@@ -9,22 +18,14 @@
     justify-content="center"
     w="full"
   >
-    <c-alert-icon box-size="40px" />
-    <c-alert-title mt="4" mb="1" font-size="lg"
-      >Application Submitted!</c-alert-title
-    >
-    <c-alert-description max-width="sm" mt="auto" font-weight="normal"
-      >Our team will review your application. If you are found a fit for this
+    <CAlertIcon box-size="40px" />
+    <CAlertTitle mt="4" mb="1" font-size="lg">
+      Application Submitted!
+    </CAlertTitle>
+    <CAlertDescription max-width="sm" mt="auto" font-weight="normal">
+      Our team will review your application. If you are found a fit for this
       role, someone will be in touch with you. Please do well to stay in touch
-      with our Jobs page</c-alert-description
-    >
-  </c-alert>
+      with our Jobs page
+    </CAlertDescription>
+  </CAlert>
 </template>
-<script setup>
-import {
-  CAlert,
-  CAlertTitle,
-  CAlertDescription,
-  CAlertIcon
-} from '@chakra-ui/vue-next';
-</script>
diff --git a/components/content/examples/alert/CompositionExample2.vue b/components/content/examples/alert/CompositionExample2.vue
index ac239d6..71f0189 100644
--- a/components/content/examples/alert/CompositionExample2.vue
+++ b/components/content/examples/alert/CompositionExample2.vue
@@ -1,17 +1,31 @@
+<script setup>
+import {
+  CButtonGroup,
+  CButton,
+  CAlert,
+  CAlertIcon,
+  CAlertTitle,
+  CAlertDescription
+} from '@chakra-ui/vue-next';
+import { ref } from 'vue';
+
+const showAlert = ref(true);
+</script>
+
 <template>
-  <c-button
+  <CButton
     v-if="!showAlert"
-    @click="showAlert = true"
     border="1px solid rgba(47, 43, 67, 0.1)"
     border-radius="2xl"
     mr="3"
     variant="outline"
     box-shadow="0px 1px 3px rgba(47, 43, 67, 0.1), inset 0px -1px 0px rgba(47, 43, 67, 0.1)"
     bg="transparent"
+    @click="showAlert = true"
   >
     Show Alert
-  </c-button>
-  <c-alert
+  </CButton>
+  <CAlert
     v-if="showAlert"
     status="warning"
     variant="subtle"
@@ -20,33 +34,19 @@
     justify-content="center"
     text-align="center"
   >
-    <c-alert-icon />
-    <c-alert-title mt="4" mb="1" font-size="lg"
-      >Before Submitting</c-alert-title
+    <CAlertIcon />
+    <CAlertTitle mt="4" mb="1" font-size="lg"
+      >Before Submitting</CAlertTitle
     >
-    <c-alert-description max-width="sm" mt="auto" font-weight="normal">
+    <CAlertDescription max-width="sm" mt="auto" font-weight="normal">
       Kindly note that this decision cannot be reversed, once you submit, your
       results are uploaded to the database.
-    </c-alert-description>
-    <c-button-group variant="outline" mt="4">
-      <c-button color-scheme="blue" @click="showAlert = false"
-        >Proceed</c-button
+    </CAlertDescription>
+    <CButtonGroup variant="outline" mt="4">
+      <CButton color-scheme="blue" @click="showAlert = false"
+        >Proceed</CButton
       >
-      <c-button @click="showAlert = false">Cancel</c-button>
-    </c-button-group>
-  </c-alert>
+      <CButton @click="showAlert = false">Cancel</CButton>
+    </CButtonGroup>
+  </CAlert>
 </template>
-
-<script setup>
-import {
-  CButtonGroup,
-  CButton,
-  CAlert,
-  CAlertIcon,
-  CAlertTitle,
-  CAlertDescription
-} from '@chakra-ui/vue-next';
-import { ref } from 'vue';
-
-const showAlert = ref(true);
-</script>
diff --git a/components/content/examples/alert/IconAlert.vue b/components/content/examples/alert/IconAlert.vue
index 5f74e10..c020650 100644
--- a/components/content/examples/alert/IconAlert.vue
+++ b/components/content/examples/alert/IconAlert.vue
@@ -1,26 +1,27 @@
+<script setup>
+import { CAlert, CAlertIcon } from '@chakra-ui/vue-next';
+</script>
+
 <template>
-  <c-alert variant="left-accent" status="info" mb="3">
-    <c-alert-icon mr="2" />
-    <c-alert-description> Please, update your KYC. </c-alert-description>
-  </c-alert>
+  <CAlert variant="left-accent" status="info" mb="3">
+    <CAlertIcon mr="2" />
+    <CAlertDescription> Please, update your KYC. </CAlertDescription>
+  </CAlert>
 
-  <c-alert variant="left-accent" status="warning" mb="3">
-    <c-alert-icon mr="2" />
-    <c-alert-description> Incorrect Password </c-alert-description>
-  </c-alert>
+  <CAlert variant="left-accent" status="warning" mb="3">
+    <CAlertIcon mr="2" />
+    <CAlertDescription> Incorrect Password </CAlertDescription>
+  </CAlert>
 
-  <c-alert variant="left-accent" status="success" mb="3">
-    <c-alert-icon mr="2" />
-    <c-alert-description>
+  <CAlert variant="left-accent" status="success" mb="3">
+    <CAlertIcon mr="2" />
+    <CAlertDescription>
       Congratulations!. You scored above 75%
-    </c-alert-description>
-  </c-alert>
+    </CAlertDescription>
+  </CAlert>
 
-  <c-alert variant="left-accent" status="error" mb="3">
-    <c-alert-icon mr="2" />
-    <c-alert-description> Access revoked!</c-alert-description>
-  </c-alert>
+  <CAlert variant="left-accent" status="error" mb="3">
+    <CAlertIcon mr="2" />
+    <CAlertDescription> Access revoked!</CAlertDescription>
+  </CAlert>
 </template>
-<script setup>
-import { CAlert, CAlertIcon } from '@chakra-ui/vue-next';
-</script>
diff --git a/components/content/examples/alert/StatusAlert.vue b/components/content/examples/alert/StatusAlert.vue
index 3d4f0fc..e83f5c0 100644
--- a/components/content/examples/alert/StatusAlert.vue
+++ b/components/content/examples/alert/StatusAlert.vue
@@ -1,18 +1,24 @@
-<template>
-  <c-alert status="info" mb="3"
-    ><c-alert-icon mr="2" /> Please update your KYC.</c-alert
-  >
-  <c-alert status="success" mb="3"
-    ><c-alert-icon mr="2" />
-    Your Info has been saved successfully.
-  </c-alert>
-  <c-alert status="warning" mb="3"
-    ><c-alert-icon mr="2" /> Unable to process request
-  </c-alert>
-  <c-alert status="error" mb="3"
-    ><c-alert-icon mr="2" /> Password is Incorrect!.
-  </c-alert>
-</template>
+
 <script setup>
 import { CAlert, CAlertIcon } from '@chakra-ui/vue-next';
 </script>
+
+
+<template>
+  <CAlert status="info" mb="3">
+    <CAlertIcon mr="2" /> 
+    Please update your KYC.
+  </CAlert>
+  <CAlert status="success" mb="3">
+    <CAlertIcon mr="2" />
+    Your Info has been saved successfully.
+  </CAlert>
+  <CAlert status="warning" mb="3">
+    <CAlertIcon mr="2" />
+    Unable to process request
+  </CAlert>
+  <CAlert status="error" mb="3">
+    <CAlertIcon mr="2" />
+    Password is Incorrect!.
+  </CAlert>
+</template>
diff --git a/components/content/examples/avatar/Avatar.vue b/components/content/examples/avatar/Avatar.vue
index ff3b967..56ec007 100644
--- a/components/content/examples/avatar/Avatar.vue
+++ b/components/content/examples/avatar/Avatar.vue
@@ -1,9 +1,9 @@
-<template>
-  <c-avatar>
-    <slot />
-  </c-avatar>
-</template>
-
 <script setup>
 import { CAvatar } from '@chakra-ui/vue-next';
 </script>
+
+<template>
+  <CAvatar>
+    <slot />
+  </CAvatar>
+</template>
diff --git a/components/content/examples/avatar/AvatarBadge.vue b/components/content/examples/avatar/AvatarBadge.vue
index f88e9a1..7d5c472 100644
--- a/components/content/examples/avatar/AvatarBadge.vue
+++ b/components/content/examples/avatar/AvatarBadge.vue
@@ -1,9 +1,9 @@
-<template>
-    <c-avatar-badge>
-      <slot />
-    </c-avatar-badge>
-</template>
-
 <script setup lang="ts">
 import { CAvatarBadge } from '@chakra-ui/vue-next';
 </script>
+
+<template>
+    <CAvatarBadge>
+      <slot />
+    </CAvatarBadge>
+</template>
diff --git a/components/content/examples/avatar/AvatarGroup.vue b/components/content/examples/avatar/AvatarGroup.vue
index 93403e9..cd8a8a8 100644
--- a/components/content/examples/avatar/AvatarGroup.vue
+++ b/components/content/examples/avatar/AvatarGroup.vue
@@ -1,28 +1,28 @@
+<script setup>
+import { CAvatar, CAvatarGroup } from '@chakra-ui/vue-next';
+</script>
+
 <template>
-  <c-avatar-group :max="3" size="lg">
-    <c-avatar
+  <CAvatarGroup :max="3" size="lg">
+    <CAvatar
       name="Segun Adebayo"
       src="https://avatars.githubusercontent.com/u/6916170?v=4"
       alt="Segun Adebayo"
     />
-    <c-avatar
+    <CAvatar
       name="Evan You"
       alt="Evan You"
       src="https://avatars.githubusercontent.com/u/499550?v=4"
     />
-    <c-avatar
+    <CAvatar
       name="Anthony Fu"
       src="https://avatars.githubusercontent.com/u/11247099?v=4"
       alt="Anthony Fu"
     />
-    <c-avatar
+    <CAvatar
       name="Maya Shavin"
       src="https://avatars.githubusercontent.com/u/6650139?v=4"
       alt="Maya Shavin"
     />
-  </c-avatar-group>
+  </CAvatarGroup>
 </template>
-
-<script setup>
-import { CAvatarGroup } from '@chakra-ui/vue-next';
-</script>
diff --git a/components/content/examples/breadcrumb/BreadcrumbComposition.vue b/components/content/examples/breadcrumb/BreadcrumbComposition.vue
index e7238a2..9d8b78e 100644
--- a/components/content/examples/breadcrumb/BreadcrumbComposition.vue
+++ b/components/content/examples/breadcrumb/BreadcrumbComposition.vue
@@ -1,16 +1,3 @@
-<template>
-  <c-breadcrumb font-size="sm" font-weight="semibold" color="red.500">
-    <c-breadcrumb-item>
-      <c-breadcrumb-link href="#">Home</c-breadcrumb-link>
-    </c-breadcrumb-item>
-    <c-breadcrumb-item>
-      <c-breadcrumb-link href="#">Docs</c-breadcrumb-link>
-    </c-breadcrumb-item>
-    <c-breadcrumb-item is-current-page>
-      <c-breadcrumb-link href="#">About</c-breadcrumb-link>
-    </c-breadcrumb-item>
-  </c-breadcrumb>
-</template>
 <script setup>
 import {
   CBreadcrumb,
@@ -18,3 +5,17 @@ import {
   CBreadcrumbLink
 } from '@chakra-ui/vue-next';
 </script>
+
+<template>
+  <CBreadcrumb font-size="sm" font-weight="semibold" color="red.500">
+    <CBreadcrumbItem>
+      <CBreadcrumbLink href="#">Home</CBreadcrumbLink>
+    </CBreadcrumbItem>
+    <CBreadcrumbItem>
+      <CBreadcrumbLink href="#">Docs</CBreadcrumbLink>
+    </CBreadcrumbItem>
+    <CBreadcrumbItem is-current-page>
+      <CBreadcrumbLink href="#">About</CBreadcrumbLink>
+    </CBreadcrumbItem>
+  </CBreadcrumb>
+</template>
diff --git a/components/content/examples/breadcrumb/DefaultSeparator.vue b/components/content/examples/breadcrumb/DefaultSeparator.vue
index d95e2d2..6963a63 100644
--- a/components/content/examples/breadcrumb/DefaultSeparator.vue
+++ b/components/content/examples/breadcrumb/DefaultSeparator.vue
@@ -1,16 +1,3 @@
-<template>
-  <c-breadcrumb>
-    <c-breadcrumb-item>
-      <c-breadcrumb-link href="#">Home</c-breadcrumb-link>
-    </c-breadcrumb-item>
-    <c-breadcrumb-item>
-      <c-breadcrumb-link href="#">Docs</c-breadcrumb-link>
-    </c-breadcrumb-item>
-    <c-breadcrumb-item is-current-page>
-      <c-breadcrumb-link href="#">About</c-breadcrumb-link>
-    </c-breadcrumb-item>
-  </c-breadcrumb>
-</template>
 <script setup>
 import {
   CBreadcrumb,
@@ -18,3 +5,17 @@ import {
   CBreadcrumbLink
 } from '@chakra-ui/vue-next';
 </script>
+
+<template>
+  <CBreadcrumb>
+    <CBreadcrumbItem>
+      <CBreadcrumbLink href="#">Home</CBreadcrumbLink>
+    </CBreadcrumbItem>
+    <CBreadcrumbItem>
+      <CBreadcrumbLink href="#">Docs</CBreadcrumbLink>
+    </CBreadcrumbItem>
+    <CBreadcrumbItem is-current-page>
+      <CBreadcrumbLink href="#">About</CBreadcrumbLink>
+    </CBreadcrumbItem>
+  </CBreadcrumb>
+</template>
diff --git a/components/content/examples/breadcrumb/FunctionalSeparator.vue b/components/content/examples/breadcrumb/FunctionalSeparator.vue
index 6fa5e8b..cdbf5f8 100644
--- a/components/content/examples/breadcrumb/FunctionalSeparator.vue
+++ b/components/content/examples/breadcrumb/FunctionalSeparator.vue
@@ -1,18 +1,3 @@
-<template>
-  <c-breadcrumb :separator="Sun">
-    <c-breadcrumb-item>
-      <c-breadcrumb-link href="#"
-        >Home</c-breadcrumb-link
-      >
-    </c-breadcrumb-item>
-    <c-breadcrumb-item>
-      <c-breadcrumb-link href="#">Docs</c-breadcrumb-link>
-    </c-breadcrumb-item>
-    <c-breadcrumb-item is-current-page>
-      <c-breadcrumb-link href="#">About</c-breadcrumb-link>
-    </c-breadcrumb-item>
-  </c-breadcrumb>
-</template>
 <script setup>
 import {
   CBreadcrumb,
@@ -27,3 +12,17 @@ const Sun = () => {
   });
 };
 </script>
+
+<template>
+  <CBreadcrumb :separator="Sun">
+    <CBreadcrumbItem>
+      <CBreadcrumbLink href="#">Home</CBreadcrumbLink>
+    </CBreadcrumbItem>
+    <CBreadcrumbItem>
+      <CBreadcrumbLink href="#">Docs</CBreadcrumbLink>
+    </CBreadcrumbItem>
+    <CBreadcrumbItem is-current-page>
+      <CBreadcrumbLink href="#">About</CBreadcrumbLink>
+    </CBreadcrumbItem>
+  </CBreadcrumb>
+</template>
diff --git a/components/content/examples/breadcrumb/SimpleBreadcrumb.vue b/components/content/examples/breadcrumb/SimpleBreadcrumb.vue
index d95e2d2..6963a63 100644
--- a/components/content/examples/breadcrumb/SimpleBreadcrumb.vue
+++ b/components/content/examples/breadcrumb/SimpleBreadcrumb.vue
@@ -1,16 +1,3 @@
-<template>
-  <c-breadcrumb>
-    <c-breadcrumb-item>
-      <c-breadcrumb-link href="#">Home</c-breadcrumb-link>
-    </c-breadcrumb-item>
-    <c-breadcrumb-item>
-      <c-breadcrumb-link href="#">Docs</c-breadcrumb-link>
-    </c-breadcrumb-item>
-    <c-breadcrumb-item is-current-page>
-      <c-breadcrumb-link href="#">About</c-breadcrumb-link>
-    </c-breadcrumb-item>
-  </c-breadcrumb>
-</template>
 <script setup>
 import {
   CBreadcrumb,
@@ -18,3 +5,17 @@ import {
   CBreadcrumbLink
 } from '@chakra-ui/vue-next';
 </script>
+
+<template>
+  <CBreadcrumb>
+    <CBreadcrumbItem>
+      <CBreadcrumbLink href="#">Home</CBreadcrumbLink>
+    </CBreadcrumbItem>
+    <CBreadcrumbItem>
+      <CBreadcrumbLink href="#">Docs</CBreadcrumbLink>
+    </CBreadcrumbItem>
+    <CBreadcrumbItem is-current-page>
+      <CBreadcrumbLink href="#">About</CBreadcrumbLink>
+    </CBreadcrumbItem>
+  </CBreadcrumb>
+</template>
diff --git a/components/content/examples/breadcrumb/SlotSeparator.vue b/components/content/examples/breadcrumb/SlotSeparator.vue
index 759108d..9da6eb0 100644
--- a/components/content/examples/breadcrumb/SlotSeparator.vue
+++ b/components/content/examples/breadcrumb/SlotSeparator.vue
@@ -1,19 +1,3 @@
-<template>
-  <c-breadcrumb>
-    <template v-slot:#separator>
-      <c-icon name="chevron-right" />
-    </template>
-    <c-breadcrumb-item>
-      <c-breadcrumb-link href="#">Home</c-breadcrumb-link>
-    </c-breadcrumb-item>
-    <c-breadcrumb-item>
-      <c-breadcrumb-link href="#">Docs</c-breadcrumb-link>
-    </c-breadcrumb-item>
-    <c-breadcrumb-item is-current-page>
-      <c-breadcrumb-link href="#">About</c-breadcrumb-link>
-    </c-breadcrumb-item>
-  </c-breadcrumb>
-</template>
 <script setup>
 import {
   CBreadcrumb,
@@ -22,3 +6,20 @@ import {
   CIcon
 } from '@chakra-ui/vue-next';
 </script>
+
+<template>
+  <CBreadcrumb>
+    <template v-slot:#separator>
+      <CIcon name="chevron-right" />
+    </template>
+    <CBreadcrumbItem>
+      <CBreadcrumbLink href="#">Home</CBreadcrumbLink>
+    </CBreadcrumbItem>
+    <CBreadcrumbItem>
+      <CBreadcrumbLink href="#">Docs</CBreadcrumbLink>
+    </CBreadcrumbItem>
+    <CBreadcrumbItem is-current-page>
+      <CBreadcrumbLink href="#">About</CBreadcrumbLink>
+    </CBreadcrumbItem>
+  </CBreadcrumb>
+</template>
diff --git a/components/content/examples/breadcrumb/StringSeparator.vue b/components/content/examples/breadcrumb/StringSeparator.vue
index 2931887..8bb7a01 100644
--- a/components/content/examples/breadcrumb/StringSeparator.vue
+++ b/components/content/examples/breadcrumb/StringSeparator.vue
@@ -1,16 +1,3 @@
-<template>
-  <c-breadcrumb separator=">">
-    <c-breadcrumb-item>
-      <c-breadcrumb-link href="#">Home</c-breadcrumb-link>
-    </c-breadcrumb-item>
-    <c-breadcrumb-item>
-      <c-breadcrumb-link href="#">Docs</c-breadcrumb-link>
-    </c-breadcrumb-item>
-    <c-breadcrumb-item is-current-page>
-      <c-breadcrumb-link href="#">About</c-breadcrumb-link>
-    </c-breadcrumb-item>
-  </c-breadcrumb>
-</template>
 <script setup>
 import {
   CBreadcrumb,
@@ -18,3 +5,17 @@ import {
   CBreadcrumbLink
 } from '@chakra-ui/vue-next';
 </script>
+
+<template>
+  <CBreadcrumb separator=">">
+    <CBreadcrumbItem>
+      <CBreadcrumbLink href="#">Home</CBreadcrumbLink>
+    </CBreadcrumbItem>
+    <CBreadcrumbItem>
+      <CBreadcrumbLink href="#">Docs</CBreadcrumbLink>
+    </CBreadcrumbItem>
+    <CBreadcrumbItem is-current-page>
+      <CBreadcrumbLink href="#">About</CBreadcrumbLink>
+    </CBreadcrumbItem>
+  </CBreadcrumb>
+</template>
diff --git a/components/content/examples/button/BaseButton.vue b/components/content/examples/button/BaseButton.vue
index be355dc..46eee48 100644
--- a/components/content/examples/button/BaseButton.vue
+++ b/components/content/examples/button/BaseButton.vue
@@ -1,6 +1,7 @@
-<template>
-  <CButton>Button</CButton>
-</template>
 <script setup>
 import { CButton } from '@chakra-ui/vue-next';
 </script>
+
+<template>
+  <CButton>Button</CButton>
+</template>
diff --git a/components/content/examples/button/ButtonComposition.vue b/components/content/examples/button/ButtonComposition.vue
index ebde8be..3f3af0d 100644
--- a/components/content/examples/button/ButtonComposition.vue
+++ b/components/content/examples/button/ButtonComposition.vue
@@ -1,5 +1,9 @@
+<script setup>
+import { CButton } from '@chakra-ui/vue-next';
+</script>
+
 <template>
-  <c-button
+  <CButton
     size="md"
     height="48px"
     width="200px"
@@ -9,8 +13,5 @@
     variant="outline"
   >
     Button
-  </c-button>
+  </CButton>
 </template>
-<script setup>
-import { CButton } from '@chakra-ui/vue-next';
-</script>
diff --git a/components/content/examples/button/ButtonGroup.vue b/components/content/examples/button/ButtonGroup.vue
index c688664..b0aa90a 100644
--- a/components/content/examples/button/ButtonGroup.vue
+++ b/components/content/examples/button/ButtonGroup.vue
@@ -1,9 +1,10 @@
-<template>
-  <c-button-group variant="outline">
-    <c-button color-scheme="blue">Proceed</c-button>
-    <c-button>Cancel</c-button>
-  </c-button-group>
-</template>
 <script setup>
 import { CButtonGroup } from '@chakra-ui/vue-next';
 </script>
+
+<template>
+  <CButtonGroup variant="outline">
+    <CButton color-scheme="blue">Proceed</CButton>
+    <CButton>Cancel</CButton>
+  </CButtonGroup>
+</template>
diff --git a/components/content/examples/button/CustomButton.vue b/components/content/examples/button/CustomButton.vue
index eff7e59..222ab34 100644
--- a/components/content/examples/button/CustomButton.vue
+++ b/components/content/examples/button/CustomButton.vue
@@ -1,5 +1,9 @@
+<script setup>
+import { CButton } from '@chakra-ui/vue-next';
+</script>
+
 <template>
-  <c-button
+  <CButton
     border="1px solid rgba(47, 43, 67, 0.1)"
     border-radius="12px"
     mr="3"
@@ -9,8 +13,5 @@
     size="lg"
   >
     Button
-  </c-button>
+  </CButton>
 </template>
-<script setup>
-import { CButton } from '@chakra-ui/vue-next';
-</script>
diff --git a/components/content/examples/button/IconButton.vue b/components/content/examples/button/IconButton.vue
index 35589f8..da8d0a8 100644
--- a/components/content/examples/button/IconButton.vue
+++ b/components/content/examples/button/IconButton.vue
@@ -1,5 +1,9 @@
+<script setup>
+import { CButton } from '@chakra-ui/vue-next';
+</script>
+
 <template>
-  <c-button
+  <CButton
     mr="3"
     font-size="sm"
     left-icon="email"
@@ -7,8 +11,8 @@
     color-scheme="teal"
   >
     Base button
-  </c-button>
-  <c-button
+  </CButton>
+  <CButton
     mr="3"
     font-size="sm"
     right-icon="star"
@@ -16,5 +20,5 @@
     color-scheme="teal"
   >
     Base button
-  </c-button>
+  </CButton>
 </template>
diff --git a/components/content/examples/button/LoadingButton.vue b/components/content/examples/button/LoadingButton.vue
index fdd473d..49cacf6 100644
--- a/components/content/examples/button/LoadingButton.vue
+++ b/components/content/examples/button/LoadingButton.vue
@@ -1,6 +1,22 @@
+<script setup lang="ts">
+import { CButton } from '@chakra-ui/vue-next';
+import { ref } from 'vue';
+
+const isLoading = ref(false);
+let loadingTimeout: any;
+const doTask = () => {
+  isLoading.value = true;
+  loadingTimeout = setTimeout(() => {
+    isLoading.value = false;
+    console.log({ isLoading: isLoading.value });
+  }, 60000);
+  clearTimeout(loadingTimeout);
+};
+</script>
+
 <template>
   <div>
-    <c-button
+    <CButton
       mr="3"
       :is-loading="isLoading"
       color-scheme="teal"
@@ -11,40 +27,16 @@
       @click="doTask"
     >
       Click me
-    </c-button>
-    <c-button
+    </CButton>
+    <CButton
       mr="3"
       :is-loading="isLoading"
-      @click="doTask"
       color-scheme="purple"
       size="lg"
       font-size="sm"
+      @click="doTask"
     >
       Click me
-    </c-button>
+    </CButton>
   </div>
 </template>
-<script lang="ts">
-import { CButton } from '@chakra-ui/vue-next';
-import { defineComponent, ref } from 'vue';
-
-export default defineComponent({
-  setup() {
-    const isLoading = ref(false);
-    let loadingTimeout: any;
-    const doTask = () => {
-      isLoading.value = true;
-      loadingTimeout = setTimeout(() => {
-        isLoading.value = false;
-        console.log({ isLoading: isLoading.value });
-      }, 60000);
-      clearTimeout(loadingTimeout);
-    };
-
-    return {
-      isLoading,
-      doTask
-    };
-  }
-});
-</script>
diff --git a/components/content/examples/button/SizesButton.vue b/components/content/examples/button/SizesButton.vue
index 39c3d0b..69742f3 100644
--- a/components/content/examples/button/SizesButton.vue
+++ b/components/content/examples/button/SizesButton.vue
@@ -1,9 +1,10 @@
-<template>
-  <c-button mr="3" size="xs" color-scheme="teal"> Button </c-button>
-  <c-button mr="3" size="sm" color-scheme="teal"> Button </c-button>
-  <c-button mr="3" size="md" color-scheme="teal"> Button </c-button>
-  <c-button mr="3" size="lg" color-scheme="teal"> Button </c-button>
-</template>
 <script setup>
 import { CButton } from '@chakra-ui/vue-next';
 </script>
+
+<template>
+  <CButton mr="3" size="xs" color-scheme="teal"> Button </CButton>
+  <CButton mr="3" size="sm" color-scheme="teal"> Button </CButton>
+  <CButton mr="3" size="md" color-scheme="teal"> Button </CButton>
+  <CButton mr="3" size="lg" color-scheme="teal"> Button </CButton>
+</template>
diff --git a/components/content/examples/button/VariantButton.vue b/components/content/examples/button/VariantButton.vue
index 4e07e0b..fe913c2 100644
--- a/components/content/examples/button/VariantButton.vue
+++ b/components/content/examples/button/VariantButton.vue
@@ -1,10 +1,13 @@
-<template>
-  <c-button mr="3" variant="luxury"> Button </c-button>
-  <c-button mr="3" variant="solid" color-scheme="teal"> Button </c-button>
-  <c-button mr="3" variant="outline" color-scheme="teal"> Button </c-button>
-  <c-button mr="3" variant="ghost" color-scheme="teal"> Button </c-button>
-  <c-button mr="3" variant="link" color-scheme="teal"> Button </c-button>
-</template>
+
 <script setup>
 import { CButton } from '@chakra-ui/vue-next';
 </script>
+
+<template>
+  <CButton mr="3" variant="luxury"> Button </CButton>
+  <CButton mr="3" variant="solid" color-scheme="teal"> Button </CButton>
+  <CButton mr="3" variant="outline" color-scheme="teal"> Button </CButton>
+  <CButton mr="3" variant="ghost" color-scheme="teal"> Button </CButton>
+  <CButton mr="3" variant="link" color-scheme="teal"> Button </CButton>
+</template>
+
diff --git a/components/content/examples/checkbox/Checkbox.vue b/components/content/examples/checkbox/Checkbox.vue
index 0778a5b..33c98bf 100644
--- a/components/content/examples/checkbox/Checkbox.vue
+++ b/components/content/examples/checkbox/Checkbox.vue
@@ -1,7 +1,9 @@
-<template>
-  <c-checkbox> <slot /> </c-checkbox>
-</template>
 
 <script lang="ts" setup>
 import { CCheckbox } from "@chakra-ui/vue-next"
 </script>
+
+<template>
+  <CCheckbox> <slot /> </CCheckbox>
+</template>
+
diff --git a/components/content/examples/checkbox/CheckboxGroup.vue b/components/content/examples/checkbox/CheckboxGroup.vue
index ae06efc..dd772d9 100644
--- a/components/content/examples/checkbox/CheckboxGroup.vue
+++ b/components/content/examples/checkbox/CheckboxGroup.vue
@@ -1,15 +1,15 @@
 <script setup>
-import { CCheckboxGroup, CCheckbox } from '@chakra-ui/vue-next';
+import { CCheckboxGroup, CCheckbox, CStack } from '@chakra-ui/vue-next';
 
 const items = ref(["naruto", "sasuke"])
 </script>
 
 <template>
-  <c-checkbox-group v-model="items" color-scheme="blue" size="lg">
-    <c-stack>
-      <c-checkbox value="naruto"> Naruto </c-checkbox>
-      <c-checkbox value="sasuke"> Sasuke </c-checkbox>
-      <c-checkbox value="kakashi"> Kakashi </c-checkbox>
-    </c-stack>
-  </c-checkbox-group>
+  <CCheckboxGroup v-model="items" color-scheme="blue" size="lg">
+    <CStack>
+      <CCheckbox value="naruto"> Naruto </CCheckbox>
+      <CCheckbox value="sasuke"> Sasuke </CCheckbox>
+      <CCheckbox value="kakashi"> Kakashi </CCheckbox>
+    </CStack>
+  </CCheckboxGroup>
 </template>
\ No newline at end of file
diff --git a/components/content/examples/checkbox/ColorsCheckbox.vue b/components/content/examples/checkbox/ColorsCheckbox.vue
index 4f7c41d..5e12def 100644
--- a/components/content/examples/checkbox/ColorsCheckbox.vue
+++ b/components/content/examples/checkbox/ColorsCheckbox.vue
@@ -1,14 +1,14 @@
 <script setup>
-import { CStack, CCheckbox } from '@chakra-ui/vue-next';
+import { CCheckbox, CStack } from '@chakra-ui/vue-next';
 </script>
 
 <template>
-  <c-stack spacing="5" direction="row">
-    <c-checkbox color-scheme='red' default-checked>
+  <CStack spacing="5" direction="row">
+    <CCheckbox color-scheme='red' default-checked>
       Red
-    </c-checkbox>
-    <c-checkbox color-scheme='green' default-checked>
+    </CCheckbox>
+    <CCheckbox color-scheme='green' default-checked>
       Green
-    </c-checkbox>
-  </c-stack>
+    </CCheckbox>
+  </CStack>
 </template>
\ No newline at end of file
diff --git a/components/content/examples/checkbox/DisabledCheckbox.vue b/components/content/examples/checkbox/DisabledCheckbox.vue
index e369b82..c4da737 100644
--- a/components/content/examples/checkbox/DisabledCheckbox.vue
+++ b/components/content/examples/checkbox/DisabledCheckbox.vue
@@ -1,10 +1,10 @@
 <script setup>
-import { CCheckbox } from '@chakra-ui/vue-next';
+import { CCheckbox, CStack } from '@chakra-ui/vue-next';
 </script>
 
 <template>
-  <c-stack spacing="5" direction="row"> 
-    <c-checkbox is-disabled> Disabled checkbox </c-checkbox> 
-    <c-checkbox is-disabled default-checked> Disabled checked </c-checkbox>
-  </c-stack>
+  <CStack spacing="5" direction="row"> 
+    <CCheckbox is-disabled> Disabled checkbox </CCheckbox> 
+    <CCheckbox is-disabled default-checked> Disabled checked </CCheckbox>
+  </CStack>
 </template>
\ No newline at end of file
diff --git a/components/content/examples/checkbox/Indeterminate.vue b/components/content/examples/checkbox/Indeterminate.vue
index 90c9ffe..b8a199c 100644
--- a/components/content/examples/checkbox/Indeterminate.vue
+++ b/components/content/examples/checkbox/Indeterminate.vue
@@ -1,6 +1,21 @@
+<script lang="ts" setup>
+import { computed, ref } from "vue"
+import { CCheckbox, CStack } from "@chakra-ui/vue-next"
+
+const checkedItems = ref([false, false])
+function setCheckedItems(value: boolean[]) {
+  checkedItems.value = [value[0], value[1]]
+}
+
+const allChecked = computed(() => checkedItems.value.every(Boolean))
+const isIndeterminate = computed(
+  () => checkedItems.value.some(Boolean) && !allChecked.value
+)
+</script>
+
 <template>
-  <c-stack>
-    <c-checkbox
+  <CStack>
+    <CCheckbox
       v-model="allChecked"
       :is-indeterminate="isIndeterminate"
       @change="
@@ -10,9 +25,9 @@
       "
     >
       Parent checkbox
-    </c-checkbox>
-    <c-stack pl="6" mt="1" spacing="1">
-      <c-checkbox
+    </CCheckbox>
+    <CStack pl="6" mt="1" spacing="1">
+      <CCheckbox
         :model-value="checkedItems[0]"
         @change="
           (value) => {
@@ -21,8 +36,8 @@
         "
       >
         Child Checkbox 1
-      </c-checkbox>
-      <c-checkbox
+      </CCheckbox>
+      <CCheckbox
         :model-value="checkedItems[1]"
         @change="
           (value) => {
@@ -31,23 +46,7 @@
         "
       >
         Child Checkbox 2
-      </c-checkbox>
-    </c-stack>
-  </c-stack>
-</template>
-
-<script lang="ts" setup>
-import { computed, ref } from "vue"
-
-import { CCheckbox } from "@chakra-ui/vue-next"
-
-const checkedItems = ref([false, false])
-function setCheckedItems(value: boolean[]) {
-  checkedItems.value = [value[0], value[1]]
-}
-
-const allChecked = computed(() => checkedItems.value.every(Boolean))
-const isIndeterminate = computed(
-  () => checkedItems.value.some(Boolean) && !allChecked.value
-)
-</script>
\ No newline at end of file
+      </CCheckbox>
+    </CStack>
+  </CStack>
+</template>
\ No newline at end of file
diff --git a/components/content/examples/checkbox/SizesCheckbox.vue b/components/content/examples/checkbox/SizesCheckbox.vue
index 01dd036..b7a1b70 100644
--- a/components/content/examples/checkbox/SizesCheckbox.vue
+++ b/components/content/examples/checkbox/SizesCheckbox.vue
@@ -1,17 +1,17 @@
 <script setup>
-import { CWrap, CCheckbox } from '@chakra-ui/vue-next';
+import { CCheckbox, CWrap } from '@chakra-ui/vue-next';
 </script>
 
 <template>
-  <c-wrap spacing="5" align="center" direction="row">
-    <c-checkbox size='sm' color-scheme='red'>
+  <CWrap spacing="5" align="center" direction="row">
+    <CCheckbox size='sm' color-scheme='red'>
       Small
-    </c-checkbox>
-    <c-checkbox size='md' color-scheme='green' default-checked>
+    </CCheckbox>
+    <CCheckbox size='md' color-scheme='green' default-checked>
       Medium
-    </c-checkbox>
-    <c-checkbox size='lg' color-scheme='orange' default-checked>
+    </CCheckbox>
+    <CCheckbox size='lg' color-scheme='orange' default-checked>
       Large
-    </c-checkbox>
-  </c-wrap>
+    </CCheckbox>
+  </CWrap>
 </template>
\ No newline at end of file
diff --git a/components/content/examples/closebutton/CloseButton.vue b/components/content/examples/closebutton/CloseButton.vue
index 7188dd0..6d4266c 100644
--- a/components/content/examples/closebutton/CloseButton.vue
+++ b/components/content/examples/closebutton/CloseButton.vue
@@ -1,6 +1,9 @@
-<template>
-  <c-close-button @click="handleClose" />
-</template>
+
 <script setup>
 import { CCloseButton } from '@chakra-ui/vue-next';
 </script>
+
+<template>
+  <CCloseButton @click="handleClose" />
+</template>
+
diff --git a/components/content/examples/closebutton/CloseButtonSizes.vue b/components/content/examples/closebutton/CloseButtonSizes.vue
index 5d4fb17..57056eb 100644
--- a/components/content/examples/closebutton/CloseButtonSizes.vue
+++ b/components/content/examples/closebutton/CloseButtonSizes.vue
@@ -1,8 +1,9 @@
-<template>
-  <c-close-button size="sm" @click="handleClose" />
-  <c-close-button ml="6" size="md" @click="handleClose" />
-  <c-close-button ml="6" size="lg" @click="handleClose" />
-</template>
 <script setup>
 import { CCloseButton } from '@chakra-ui/vue-next';
 </script>
+
+<template>
+  <CCloseButton size="sm" @click="handleClose" />
+  <CCloseButton ml="6" size="md" @click="handleClose" />
+  <CCloseButton ml="6" size="lg" @click="handleClose" />
+</template>
diff --git a/components/content/examples/icons/Icon.vue b/components/content/examples/icons/Icon.vue
index 22c7434..8e28c36 100644
--- a/components/content/examples/icons/Icon.vue
+++ b/components/content/examples/icons/Icon.vue
@@ -1,6 +1,7 @@
 <script setup>
 import { CIcon } from '@chakra-ui/vue-next';
 </script>
+
 <template>
-  <c-icon />
+  <CIcon />
 </template>
\ No newline at end of file
diff --git a/components/content/examples/input/BasicInput.vue b/components/content/examples/input/BasicInput.vue
index 1b72748..bc8aa71 100644
--- a/components/content/examples/input/BasicInput.vue
+++ b/components/content/examples/input/BasicInput.vue
@@ -1,7 +1,7 @@
-<template>
-    <c-input placeholder="Basic usage" />
-</template>
-
 <script setup>
 import { CInput } from '@chakra-ui/vue-next';
-</script>
\ No newline at end of file
+</script>
+
+<template>
+    <CInput placeholder="Basic usage" />
+</template>
\ No newline at end of file
diff --git a/components/content/examples/input/InputAddon.vue b/components/content/examples/input/InputAddon.vue
index 0aa4d34..3463b90 100644
--- a/components/content/examples/input/InputAddon.vue
+++ b/components/content/examples/input/InputAddon.vue
@@ -1,19 +1,20 @@
+
+<script setup>
+import { CInput, CInputGroup, CInputLeftAddon, CInputRightAddon, CStack } from '@chakra-ui/vue-next';
+</script>
+
 <template>
-    <c-stack spacing="4" w="xl" align-items="center">
-        <c-input-group>
-            <c-input-left-addon>+234</c-input-left-addon>
-            <c-input type="tel" rounded-left="0" placeholder="phone number" />
-        </c-input-group>
+    <CStack spacing="4" w="xl" align-items="center">
+        <CInputGroup>
+            <CInputLeftAddon>+234</CInputLeftAddon>
+            <CInput type="tel" rounded-left="0" placeholder="phone number" />
+        </CInputGroup>
         <!-- If you add the size prop to `InputGroup`, it'll pass it to all its children.  -->
 
-        <c-input-group>
-            <c-input-left-addon>https://</c-input-left-addon>
-            <c-input rounded="0" placeholder="mysite" />
-            <c-input-right-addon>.com</c-input-right-addon>
-        </c-input-group>
-    </c-stack>
+        <CInputGroup>
+            <CInputLeftAddon>https://</CInputLeftAddon>
+            <CInput rounded="0" placeholder="mysite" />
+            <CInputRightAddon>.com</CInputRightAddon>
+        </CInputGroup>
+    </CStack>
 </template>
-
-<script setup>
-import { CInput, CStack, CInputGroup, CInputLeftAddon, CInputRightAddon } from '@chakra-ui/vue-next';
-</script>
\ No newline at end of file
diff --git a/components/content/examples/input/InputAppearance.vue b/components/content/examples/input/InputAppearance.vue
index 2d90b0c..cbd9823 100644
--- a/components/content/examples/input/InputAppearance.vue
+++ b/components/content/examples/input/InputAppearance.vue
@@ -1,12 +1,12 @@
-<template>
-    <c-stack spacing="3" w="2xl" align-items="center">
-        <c-input variant='outline' placeholder='Outline' />
-        <c-input variant='filled' placeholder='Filled' />
-        <c-input variant='flushed' placeholder='Flushed' />
-        <c-input variant='unstyled' placeholder='Unstyled' />
-    </c-stack>
-</template>
-
 <script setup>
 import { CInput, CStack } from '@chakra-ui/vue-next';
-</script>
\ No newline at end of file
+</script>
+
+<template>
+    <CStack spacing="3" w="2xl" align-items="center">
+        <CInput variant='outline' placeholder='Outline' />
+        <CInput variant='filled' placeholder='Filled' />
+        <CInput variant='flushed' placeholder='Flushed' />
+        <CInput variant='unstyled' placeholder='Unstyled' />
+    </CStack>
+</template>
diff --git a/components/content/examples/input/InputDate.vue b/components/content/examples/input/InputDate.vue
index 81a6fa3..5778b67 100644
--- a/components/content/examples/input/InputDate.vue
+++ b/components/content/examples/input/InputDate.vue
@@ -1,9 +1,9 @@
-<template>
-    <c-stack spacing="4" w="xl" align-items="center">
-        <c-input type="datetime-local" placeholder="Select Date and Time" size="md" />
-    </c-stack>
-</template>
-
 <script setup>
 import { CInput, CStack } from '@chakra-ui/vue-next';
-</script>
\ No newline at end of file
+</script>
+
+<template>
+    <CStack spacing="4" w="xl" align-items="center">
+        <CInput type="datetime-local" placeholder="Select Date and Time" size="md" />
+    </CStack>
+</template>
\ No newline at end of file
diff --git a/components/content/examples/input/InputElements.vue b/components/content/examples/input/InputElements.vue
index 38de4d8..53e45cc 100644
--- a/components/content/examples/input/InputElements.vue
+++ b/components/content/examples/input/InputElements.vue
@@ -1,18 +1,18 @@
+<script setup>
+import { CInput, CInputGroup, CInputLeftElement, CIcon, CInputRightElement, CStack } from '@chakra-ui/vue-next';
+</script>
+
 <template>
-    <c-stack spacing="4" w="xl" align-items="center">
-        <c-input-group>
-            <c-input-left-element><c-icon name="phone" color="gray.300" /></c-input-left-element>
-            <c-input type="phone" placeholder="Phone number" />
-        </c-input-group>
+    <CStack spacing="4" w="xl" align-items="center">
+        <CInputGroup>
+            <CInputLeftElement><CIcon name="phone" color="gray.300" /></CInputLeftElement>
+            <CInput type="phone" placeholder="Phone number" />
+        </CInputGroup>
 
-        <c-input-group>
-            <c-input-left-element color="gray.300" fontSize="1.2em">¥</c-input-left-element>
-            <c-input placeholder="Enter amount" />
-            <c-input-right-element><c-icon name="check" color="green.500" /></c-input-right-element>
-        </c-input-group>
-    </c-stack>
+        <CInputGroup>
+            <CInputLeftElement color="gray.300" font-size="1.2em">¥</CInputLeftElement>
+            <CInput placeholder="Enter amount" />
+            <CInputRightElement><CIcon name="check" color="green.500" /></CInputRightElement>
+        </CInputGroup>
+    </CStack>
 </template>
-
-<script setup>
-import { CInput, CStack, CInputGroup, CInputLeftElement, CIcon, CInputRightElement } from '@chakra-ui/vue-next';
-</script>
\ No newline at end of file
diff --git a/components/content/examples/input/InputFocus.vue b/components/content/examples/input/InputFocus.vue
index 81b72b3..5936ec1 100644
--- a/components/content/examples/input/InputFocus.vue
+++ b/components/content/examples/input/InputFocus.vue
@@ -1,12 +1,12 @@
-<template>
-    <c-stack spacing="4" w="xl" align-items="center">
-        <c-input focus-border-color="lime" placeholder="Here is a sample placeholder" />
-        <c-input focus-border-color="pink.400" placeholder="Here is a sample placeholder" />
-        <c-input is-invalid error-border-color="red.300" placeholder="Here is a sample placeholder" />
-        <c-input is-invalid error-border-color="crimson" placeholder="Here is a sample placeholder" />
-    </c-stack>
-</template>
-
 <script setup>
 import { CInput, CStack } from '@chakra-ui/vue-next';
-</script>
\ No newline at end of file
+</script>
+
+<template>
+    <CStack spacing="4" w="xl" align-items="center">
+        <CInput focus-border-color="lime" placeholder="Here is a sample placeholder" />
+        <CInput focus-border-color="pink.400" placeholder="Here is a sample placeholder" />
+        <CInput is-invalid error-border-color="red.300" placeholder="Here is a sample placeholder" />
+        <CInput is-invalid error-border-color="crimson" placeholder="Here is a sample placeholder" />
+    </CStack>
+</template>
diff --git a/components/content/examples/input/InputHtmlSize.vue b/components/content/examples/input/InputHtmlSize.vue
index 6e74bcf..a2b6280 100644
--- a/components/content/examples/input/InputHtmlSize.vue
+++ b/components/content/examples/input/InputHtmlSize.vue
@@ -1,7 +1,7 @@
-<template>
-    <c-input html-size="4" width="auto" />
-</template>
-
 <script setup>
 import { CInput } from '@chakra-ui/vue-next';
-</script>
\ No newline at end of file
+</script>
+
+<template>
+    <CInput html-size="4" width="auto" />
+</template>
diff --git a/components/content/examples/input/InputPassword.vue b/components/content/examples/input/InputPassword.vue
index 42df7fc..7af3b94 100644
--- a/components/content/examples/input/InputPassword.vue
+++ b/components/content/examples/input/InputPassword.vue
@@ -1,16 +1,16 @@
-<template>
-    <c-input-group size="md">
-        <c-input pr="4.5rem" :type="show ? 'text' : 'password'" placeholder="Enter password" v-model="password" />
-        <c-input-right-element width="4.5rem">
-            <c-button h="1.75rem" size="sm" @click="show = !show">
-                {{ show ? 'Hide' : 'Show' }}
-            </c-button>
-        </c-input-right-element>
-    </c-input-group>
-</template>
-  
 <script setup>
-import { CInput, CInputGroup, CInputRightElement } from '@chakra-ui/vue-next';
+import { CButton, CInput, CInputGroup, CInputRightElement } from '@chakra-ui/vue-next';
 const show = ref(false);
 const password = ref('kurama<3naruto');
-</script>
\ No newline at end of file
+</script>
+
+<template>
+    <CInputGroup size="md">
+        <CInput v-model="password" pr="4.5rem" :type="show ? 'text' : 'password'" placeholder="Enter password" />
+        <CInputRightElement width="4.5rem">
+            <CButton h="1.75rem" size="sm" @click="show = !show">
+                {{ show ? 'Hide' : 'Show' }}
+            </CButton>
+        </CInputRightElement>
+    </CInputGroup>
+</template>
diff --git a/components/content/examples/input/InputPlaceholderStyle.vue b/components/content/examples/input/InputPlaceholderStyle.vue
index a2d8cb5..2178e9a 100644
--- a/components/content/examples/input/InputPlaceholderStyle.vue
+++ b/components/content/examples/input/InputPlaceholderStyle.vue
@@ -1,12 +1,12 @@
-<template>
-    <c-stack spacing="4" w="xl" align-items="center">
-        <c-input placeholder='default placeholder' />
-        <c-input placeholder='custom placeholder' :_placeholder="{ opacity: 1, color: 'gray.500' }" />
-        <c-input color='teal' placeholder='custom placeholder' :_placeholder="{ color: 'inherit' }" />
-        <c-input color='tomato' placeholder='custom placeholder' :_placeholder="{ opacity: 0.4, color: 'inherit' }" />
-    </c-stack>
-</template>
-
 <script setup>
 import { CInput, CStack } from '@chakra-ui/vue-next';
-</script>
\ No newline at end of file
+</script>
+
+<template>
+    <CStack spacing="4" w="xl" align-items="center">
+        <CInput placeholder='default placeholder' />
+        <CInput placeholder='custom placeholder' :_placeholder="{ opacity: 1, color: 'gray.500' }" />
+        <CInput color='teal' placeholder='custom placeholder' :_placeholder="{ color: 'inherit' }" />
+        <CInput color='tomato' placeholder='custom placeholder' :_placeholder="{ opacity: 0.4, color: 'inherit' }" />
+    </CStack>
+</template>
diff --git a/components/content/examples/input/SizeInput.vue b/components/content/examples/input/SizeInput.vue
index ec16c6a..d17d42f 100644
--- a/components/content/examples/input/SizeInput.vue
+++ b/components/content/examples/input/SizeInput.vue
@@ -1,12 +1,12 @@
-<template>
-    <c-stack spacing="3" w="2xl" align-items="center">
-        <c-input placeholder="extra small size" size="xs" />
-        <c-input placeholder="small size" size="sm" />
-        <c-input placeholder="medium size" size="md" />
-        <c-input placeholder="large size" size="lg" />
-    </c-stack>
-</template>
-
 <script setup>
 import { CInput, CStack } from '@chakra-ui/vue-next';
-</script>
\ No newline at end of file
+</script>
+
+<template>
+    <CStack spacing="3" w="2xl" align-items="center">
+        <CInput placeholder="extra small size" size="xs" />
+        <CInput placeholder="small size" size="sm" />
+        <CInput placeholder="medium size" size="md" />
+        <CInput placeholder="large size" size="lg" />
+    </CStack>
+</template>
diff --git a/content/2.styled-system/1.style-props.md b/content/2.styled-system/1.style-props.md
index 6f0d5ab..3cd2416 100644
--- a/content/2.styled-system/1.style-props.md
+++ b/content/2.styled-system/1.style-props.md
@@ -22,36 +22,36 @@ each group.
 ```html
 <template>
   <!-- m="2" refers to the value of theme.space.[2] -->
-  <c-box m="2">Tomato</c-box>
+  <CBox m="2">Tomato</CBox>
   
   <!-- You can also make use of custom values -->
-  <c-box max-w="960px" mx="auto">Custom</c-box>
+  <CBox max-w="960px" mx="auto">Custom</CBox>
   
   <!-- sets margin `8px` on all viewports and `12px` from the first breakpoint and up -->
-  <c-box :m="['2', '3']" />
+  <CBox :m="['2', '3']" />
 </template>
 ```
 
 | Prop                  | CSS Property                                  | Theme Key |
 | --------------------- | --------------------------------------------- | --------- |
 | `m`, `margin`         | `margin`                                      | `space`   |
-| `mt`, `marginTop`     | `margin-top`                                  | `space`   |
-| `mr`, `marginRight`   | `margin-right`                                | `space`   |
-| `me`, `marginEnd`     | `margin-inline-end`                           | `space`   |
-| `mb`, `marginBottom`  | `margin-bottom`                               | `space`   |
-| `ml`, `marginLeft`    | `margin-left`                                 | `space`   |
-| `ms`, `marginStart`   | `margin-inline-start`                         | `space`   |
-| `mx`, `marginX`       | `margin-inline-start` + `margin-inline-end`   | `space`   |
-| `my`, `marginY`       | `margin-top` + `margin-bottom`                | `space`   |
+| `mt`, `margin-top`     | `margin-top`                                  | `space`   |
+| `mr`, `margin-right`   | `margin-right`                                | `space`   |
+| `me`, `margin-end`     | `margin-inline-end`                           | `space`   |
+| `mb`, `margin-bottom`  | `margin-bottom`                               | `space`   |
+| `ml`, `margin-left`    | `margin-left`                                 | `space`   |
+| `ms`, `margin-start`   | `margin-inline-start`                         | `space`   |
+| `mx`, `margin-x`       | `margin-inline-start` + `margin-inline-end`   | `space`   |
+| `my`, `margin-y`       | `margin-top` + `margin-bottom`                | `space`   |
 | `p`, `padding`        | `padding`                                     | `space`   |
-| `pt`, `paddingTop`    | `padding-top`                                 | `space`   |
-| `pr`, `paddingRight`  | `padding-right`                               | `space`   |
-| `pe`, `paddingEnd`    | `padding-inline-end`                          | `space`   |
-| `pb`, `paddingBottom` | `padding-bottom`                              | `space`   |
-| `pl`, `paddingLeft`   | `padding-left`                                | `space`   |
-| `ps`, `paddingStart`  | `padding-inline-start`                        | `space`   |
-| `px`, `paddingX`      | `padding-inline-start` + `padding-inline-end` | `space`   |
-| `py`, `paddingY`      | `padding-top` + `padding-bottom`              | `space`   |
+| `pt`, `padding-top`    | `padding-top`                                 | `space`   |
+| `pr`, `padding-right`  | `padding-right`                               | `space`   |
+| `pe`, `padding-end`    | `padding-inline-end`                          | `space`   |
+| `pb`, `padding-bottom` | `padding-bottom`                              | `space`   |
+| `pl`, `padding-left`   | `padding-left`                                | `space`   |
+| `ps`, `padding-start`  | `padding-inline-start`                        | `space`   |
+| `px`, `padding-x`      | `padding-inline-start` + `padding-inline-end` | `space`   |
+| `py`, `padding-y`      | `padding-top` + `padding-bottom`              | `space`   |
 
 > For `mx` and `px` props, we use `margin-inline-start` and `margin-inline-end`
 > to ensure the generated styles are RTL-friendly
@@ -61,13 +61,13 @@ each group.
 ```html
 <template>
   <!-- picks up a nested color value using dot notation -->
-  <c-box color="gray.50" />
+  <CBox color="gray.50" />
   
   <!-- You can also use raw CSS color values -->
-  <c-box color="#f00" />
+  <CBox color="#f00" />
   
   <!-- Sets background color to pink -->
-  <c-box bg="pink" />
+  <CBox bg="pink" />
 </template>
 ```
 
@@ -75,7 +75,7 @@ each group.
 | ------------------ | ------------------ | --------- |
 | `color`            | `color`            | `colors`  |
 | `bg`, `background` | `background`       | `colors`  |
-| `bgColor`          | `background-color` | `colors`  |
+| `bg-color`          | `background-color` | `colors`  |
 | `opacity`          | `opacity`          | none      |
 
 ### Gradient
@@ -83,73 +83,73 @@ each group.
 ```html
 <template>
   <!-- adding linear gradient and color transitions -->
-  <c-box w="100%" h="200px" bgGradient="linear(to-t, green.200, pink.500)" />
+  <CBox w="100%" h="200px" bg-gradient="linear(to-t, green.200, pink.500)" />
   
   <!-- adding radial gradient and color transitions -->
-  <c-box w="100%" h="200px" bgGradient="radial(gray.300, yellow.400, pink.200)" />
+  <CBox w="100%" h="200px" bg-gradient="radial(gray.300, yellow.400, pink.200)" />
   
   <!-- adding the text gradient -->
-  <c-text
-    bgGradient="linear(to-l, #7928CA, #FF0080)"
-    bgClip="text"
-    fontSize="6xl"
-    fontWeight="extrabold"
+  <CText
+    bg-gradient="linear(to-l, #7928CA, #FF0080)"
+    bg-clip="text"
+    font-size="6xl"
+    font-weight="extrabold"
   >
     Welcome to Chakra UI Vue
-  </c-text>
+  </CText>
 </template>
 ```
 
 | Prop                       | CSS Property       | Theme Key |
 | -------------------------- | ------------------ | --------- |
-| `bgGradient`               | `background-image` | none      |
-| `bgClip`, `backgroundClip` | `background-clip`  | none      |
+| `bg-gradient`               | `background-image` | none      |
+| `bg-clip`, `background-clip` | `background-clip`  | none      |
 
 ### Typography
 
 ```html
 <template>
   <!-- font-size of `theme.fontSizes.md` -->
-  <c-text font-size="md" />
+  <CText font-size="md" />
   
   <!-- font-size `32px` -->
-  <c-text font-size="32" />
+  <CText font-size="32" />
   
   <!-- font-size `'2em'` -->
-  <c-text font-size="2em" />
+  <CText font-size="2em" />
   
   <!-- text-align `left` on all viewports and `center` from the first breakpoint and up -->
-  <c-text :text-align="[ 'left', 'center' ]" />
+  <CText :text-align="[ 'left', 'center' ]" />
 </template>
 ```
 
 | Prop             | CSS Property      | Theme Key        |
 | ---------------- | ----------------- | ---------------- |
-| `fontFamily`     | `font-family`     | `fonts`          |
-| `fontSize`       | `font-size`       | `fontSizes`      |
-| `fontWeight`     | `font-weight`     | `fontWeights`    |
-| `lineHeight`     | `line-height`     | `lineHeights`    |
-| `letterSpacing`  | `letter-spacing`  | `letterSpacings` |
-| `textAlign`      | `text-align`      | none             |
-| `fontStyle`      | `font-style`      | none             |
-| `textTransform`  | `text-transform`  | none             |
-| `textDecoration` | `text-decoration` | none             |
+| `font-family`     | `font-family`     | `fonts`          |
+| `font-size`       | `font-size`       | `fontSizes`      |
+| `font-weight`     | `font-weight`     | `fontWeights`    |
+| `line-height`     | `line-height`     | `lineHeights`    |
+| `letter-spacing`  | `letter-spacing`  | `letterSpacings` |
+| `text-align`      | `text-align`      | none             |
+| `font-style`      | `font-style`      | none             |
+| `text-transform`  | `text-transform`  | none             |
+| `text-decoration` | `text-decoration` | none             |
 
 ### Layout, width and height
 
 ```html
 <template>
   <!-- verbose -->
-  <c-box width="100%" height="32px" />
+  <CBox width="100%" height="32px" />
   
   <!-- shorthand -->
-  <c-box w="100%" h="32px" />
+  <CBox w="100%" h="32px" />
   
   <!-- width `256px` -->
-  <c-box w="256" />
+  <CBox w="256" />
   
   <!-- width `'40px'` -->
-  <c-box w="40px" />
+  <CBox w="40px" />
 </template>
 ```
 
@@ -157,56 +157,56 @@ each group.
 | ------------------- | ----------------- | --------- |
 | `w`, `width`        | `width`           | `sizes`   |
 | `h`, `height`       | `height`          | `sizes`   |
-| `minW`, `minWidth`  | `min-width`       | `sizes`   |
-| `maxW`, `maxWidth`  | `max-width`       | `sizes`   |
-| `minH`, `minHeight` | `min-height`      | `sizes`   |
-| `maxH`, `maxHeight` | `max-height`      | `sizes`   |
-| `boxSize`           | `width`, `height` | `sizes`   |
-| `verticalAlign`     | `vertical-align`  | none      |
+| `min-w`, `min-width`  | `min-width`       | `sizes`   |
+| `max-x`, `max-width`  | `max-width`       | `sizes`   |
+| `minH`, `min-height` | `min-height`      | `sizes`   |
+| `maxH`, `max-height` | `max-height`      | `sizes`   |
+| `box-size`           | `width`, `height` | `sizes`   |
+| `vertical-align`     | `vertical-align`  | none      |
 | `overflow`          | `overflow`        | none      |
-| `overflowX`         | `overflow-x`      | none      |
-| `overflowY`         | `overflow-y`      | none      |
+| `overflow-x`         | `overflow-x`      | none      |
+| `overflow-y`         | `overflow-y`      | none      |
 
 ### Display
 
 ```html
 <template>
   <!-- hide the element on all viewports -->
-  <c-box display='none' />
+  <CBox display='none' />
   
   <!-- hide the element by default, and show from 'md' up -->
-  <c-box :display="{ base: 'none', md: 'block' }" />
+  <CBox :display="{ base: 'none', md: 'block' }" />
   
   <!-- shorthand -->
-  <c-box hide-below='md' />
+  <CBox hide-below='md' />
   
   <!-- hide the element from 'md' up -->
-  <c-box :display="{ base: 'block', md: 'none' }" />
+  <CBox :display="{ base: 'block', md: 'none' }" />
   
   <!-- shorthand -->
-  <c-box hide-from='md' />
+  <CBox hide-from='md' />
 </template>
 ```
 
 | Prop        | CSS Property              | Theme Key     |
 | ----------- | ------------------------- | ------------- |
 | `display`   | `display`                 | none          |
-| `hideFrom`  | `display` (at breakpoint) | `breakpoints` |
-| `hideBelow` | `display` (at breakpoint) | `breakpoints` |
+| `hide-from`  | `display` (at breakpoint) | `breakpoints` |
+| `hide-below` | `display` (at breakpoint) | `breakpoints` |
 
 ### Flexbox
 
 ```html
 <template>
   <!-- verbose -->
-  <c-box display="flex" align-items="center" justify-content="space-between">
+  <CBox display="flex" align-items="center" justify-content="space-between">
     Box with Flex props
-  </c-box>
+  </CBox>
   
   <!-- shorthand using the `Flex` component -->
-  <c-flex align="center" justify="center">
+  <CFlex align="center" justify="center">
     Flex Container
-  </c-flex>
+  </CFlex>
 </template>
 ```
 
@@ -215,20 +215,20 @@ each group.
 | Prop                                      | CSS Property      | Theme Key |
 | ----------------------------------------- | ----------------- | --------- |
 | `gap`                                     | `gap`             | `space`   |
-| `rowGap`                                  | `row-gap`         | `space`   |
-| `columnGap`                               | `column-gap`      | `space`   |
-| `alignItems`, \*`align`                   | `align-items`     | none      |
-| `alignContent`                            | `align-content`   | none      |
-| `justifyItems`                            | `justify-items`   | none      |
-| `justifyContent`, \*`justify`             | `justify-content` | none      |
-| `flexWrap`, \*`wrap`                      | `flex-wrap`       | none      |
-| `flexDirection`, `flexDir`, \*`direction` | `flex-direction`  | none      |
+| `row-gap`                                  | `row-gap`         | `space`   |
+| `column-gap`                               | `column-gap`      | `space`   |
+| `align-items`, \*`align`                   | `align-items`     | none      |
+| `align-content`                            | `align-content`   | none      |
+| `justify-items`                            | `justify-items`   | none      |
+| `justify-content`, \*`justify`             | `justify-content` | none      |
+| `flex-wrap`, \*`wrap`                      | `flex-wrap`       | none      |
+| `flex-direction`, `flex-dir`, \*`direction` | `flex-direction`  | none      |
 | `flex`                                    | `flex`            | none      |
-| `flexGrow`                                | `flex-grow`       | none      |
-| `flexShrink`                              | `flex-shrink`     | none      |
-| `flexBasis`                               | `flex-basis`      | none      |
-| `justifySelf`                             | `justify-self`    | none      |
-| `alignSelf`                               | `align-self`      | none      |
+| `flex-grow`                                | `flex-grow`       | none      |
+| `flex-shrink`                              | `flex-shrink`     | none      |
+| `flex-basis`                               | `flex-basis`      | none      |
+| `justify-self`                             | `justify-self`    | none      |
+| `align-self`                               | `align-self`      | none      |
 | `order`                                   | `order`           | none      |
 
 ### Grid Layout
@@ -236,14 +236,14 @@ each group.
 ```html
 <template>
   <!-- verbose -->
-  <c-box display="grid" grid-gap="2" grid-auto-flow="row dense">
+  <CBox display="grid" grid-gap="2" grid-auto-flow="row dense">
     Grid
-  </c-box>
+  </CBox>
   
   <!-- shorthand using the `Grid` component -->
-  <c-grid gap="2" auto-flow="row dense">
+  <CGrid gap="2" auto-flow="row dense">
     Grid
-  </c-grid>
+  </CGrid>
 </template>
 ```
 
@@ -251,144 +251,144 @@ each group.
 
 | Prop                                       | CSS Property            | Theme Key |
 | ------------------------------------------ | ----------------------- | --------- |
-| `gridGap`, \*`gap`                         | `grid-gap`              | `space`   |
-| `gridRowGap`, \*`rowGap`                   | `grid-row-gap`          | `space`   |
-| `gridColumnGap`, \*`columnGap`             | `grid-column-gap`       | `space`   |
-| `gridColumn`, \*`column`                   | `grid-column`           | none      |
-| `gridRow`, \*`row`                         | `grid-row`              | none      |
-| `gridArea`, \*`area`                       | `grid-area`             | none      |
-| `gridAutoFlow`, \*`autoFlow`               | `grid-auto-flow`        | none      |
-| `gridAutoRows`, \*`autoRows`               | `grid-auto-rows`        | none      |
-| `gridAutoColumns`, \*`autoColumns`         | `grid-auto-columns`     | none      |
-| `gridTemplateRows`, \*`templateRows`       | `grid-template-rows`    | none      |
-| `gridTemplateColumns`, \*`templateColumns` | `grid-template-columns` | none      |
-| `gridTemplateAreas`, \*`templateAreas`     | `grid-template-areas`   | none      |
+| `grid-gap`, \*`gap`                         | `grid-gap`              | `space`   |
+| `grid-row-cap`, \*`row-gap`                   | `grid-row-gap`          | `space`   |
+| `grid-column-gap`, \*`column-gap`             | `grid-column-gap`       | `space`   |
+| `grid-column`, \*`column`                   | `grid-column`           | none      |
+| `grid-row`, \*`row`                         | `grid-row`              | none      |
+| `grid-area`, \*`area`                       | `grid-area`             | none      |
+| `grid-auto-flow`, \*`auto-flow`               | `grid-auto-flow`        | none      |
+| `grid-auto-rows`, \*`auto-rows`               | `grid-auto-rows`        | none      |
+| `grid-auto-columns`, \*`auto-columns`         | `grid-auto-columns`     | none      |
+| `grid-template-rows`, \*`template-rows`       | `grid-template-rows`    | none      |
+| `grid-template-columns`, \*`template-columns` | `grid-template-columns` | none      |
+| `grid-template-areas`, \*`template-areas`     | `grid-template-areas`   | none      |
 
 ### Background
 
 ```html
 <template>
   <!-- verbose -->
-  <c-box
+  <CBox
     background-image="url('/images/kyuubi.png')"
     background-position="center"
     background-repeat="no-repeat"
   >
   
   <!-- shorthand -->
-  <c-box bg-image="url('/images/gaara.png')" bg-pos="center" bg-repeat="no-repeat" >
+  <CBox bg-image="url('/images/gaara.png')" bg-pos="center" bg-repeat="no-repeat" >
 </template>
 ```
 
 | Prop                                  | CSS Property            | Theme Key |
 | ------------------------------------- | ----------------------- | --------- |
 | `bg`, `background`                    | `background`            | none      |
-| `bgImage`, `backgroundImage`          | `background-image`      | none      |
-| `bgSize`, `backgroundSize`            | `background-size`       | none      |
-| `bgPosition`,`backgroundPosition`     | `background-position`   | none      |
-| `bgRepeat`,`backgroundRepeat`         | `background-repeat`     | none      |
-| `bgAttachment`,`backgroundAttachment` | `background-attachment` | none      |
+| `bg-image`, `background-image`          | `background-image`      | none      |
+| `bg-size`, `background-size`            | `background-size`       | none      |
+| `bg-position`,`background-position`     | `background-position`   | none      |
+| `bg-repeat`,`background-repeat`         | `background-repeat`     | none      |
+| `bg-attachment`,`background-attachment` | `background-attachment` | none      |
 
 ### Borders
 
 ```html
 <template>
-  <c-box border="1px" border-radius="md" border-color="gray.200">
+  <CBox border="1px" border-radius="md" border-color="gray.200">
     Card
-  </c-box>
+  </CBox>
 </template>
 ```
 
 | Prop                | CSS Property                   | Theme Field    |
 | ------------------- | ------------------------------ | -------------- |
 | `border`            | `border`                       | `borders`      |
-| `borderWidth`       | `border-width`                 | `borderWidths` |
-| `borderStyle`       | `border-style`                 | `borderStyles` |
-| `borderColor`       | `border-color`                 | `colors`       |
-| `borderTop`         | `border-top`                   | `borders`      |
-| `borderTopWidth`    | `border-top-width`             | `borderWidths` |
-| `borderTopStyle`    | `border-top-style`             | `borderStyles` |
-| `borderTopColor`    | `border-top-color`             | `colors`       |
-| `borderRight`       | `border-right`                 | `borders`      |
-| `borderEnd`         | `border-inline-end`            | `borders`      |
-| `borderRightWidth`  | `border-right-width`           | `borderWidths` |
-| `borderEndWidth`    | `border-inline-end-width`      | `borderWidths` |
-| `borderRightStyle`  | `border-right-style`           | `borderStyles` |
-| `borderEndStyle`    | `border-inline-end-style`      | `borderStyles` |
-| `borderRightColor`  | `border-right-color`           | `colors`       |
-| `borderEndColor`    | `border-inline-end-color`      | `colors`       |
-| `borderBottom`      | `border-bottom`                | `borders`      |
-| `borderBottomWidth` | `border-bottom-width`          | `borderWidths` |
-| `borderBottomStyle` | `border-bottom-style`          | `borderStyles` |
-| `borderBottomColor` | `border-bottom-color`          | `colors`       |
-| `borderLeft`        | `border-left`                  | `borders`      |
-| `borderStart`       | `border-inline-start`          | `borders`      |
-| `borderLeftWidth`   | `border-left-width`            | `borderWidths` |
-| `borderStartWidth`  | `border-inline-start-width`    | `borderWidths` |
-| `borderLeftStyle`   | `border-left-style`            | `borderStyles` |
-| `borderStartStyle`  | `border-inline-start-style`    | `borderStyles` |
-| `borderLeftColor`   | `border-left-color`            | `colors`       |
-| `borderStartColor`  | `border-inline-start-color`    | `colors`       |
-| `borderX`           | `border-left` , `border-right` | `borders`      |
-| `borderY`           | `border-top` , `border-bottom` | `borders`      |
+| `border-width`       | `border-width`                 | `borderWidths` |
+| `border-style`       | `border-style`                 | `borderStyles` |
+| `border-color`       | `border-color`                 | `colors`       |
+| `border-top`         | `border-top`                   | `borders`      |
+| `border-top-width`    | `border-top-width`             | `borderWidths` |
+| `border-top-style`    | `border-top-style`             | `borderStyles` |
+| `border-top-color`    | `border-top-color`             | `colors`       |
+| `border-right`       | `border-right`                 | `borders`      |
+| `border-end`         | `border-inline-end`            | `borders`      |
+| `border-right-width`  | `border-right-width`           | `borderWidths` |
+| `border-end-width`    | `border-inline-end-width`      | `borderWidths` |
+| `border-right-style`  | `border-right-style`           | `borderStyles` |
+| `border-end-style`    | `border-inline-end-style`      | `borderStyles` |
+| `border-right-color`  | `border-right-color`           | `colors`       |
+| `border-end-color`    | `border-inline-end-color`      | `colors`       |
+| `border-bottom`      | `border-bottom`                | `borders`      |
+| `border-bottom-width` | `border-bottom-width`          | `borderWidths` |
+| `border-bottom-style` | `border-bottom-style`          | `borderStyles` |
+| `border-bottom-color` | `border-bottom-color`          | `colors`       |
+| `border-left`        | `border-left`                  | `borders`      |
+| `border-start`       | `border-inline-start`          | `borders`      |
+| `border-left-width`   | `border-left-width`            | `borderWidths` |
+| `border-start-width`  | `border-inline-start-width`    | `borderWidths` |
+| `border-left-style`   | `border-left-style`            | `borderStyles` |
+| `border-start-style`  | `border-inline-start-style`    | `borderStyles` |
+| `border-left-color`   | `border-left-color`            | `colors`       |
+| `border-start-color`  | `border-inline-start-color`    | `colors`       |
+| `border-x`           | `border-left` , `border-right` | `borders`      |
+| `border-y`           | `border-top` , `border-bottom` | `borders`      |
 
 ### Border Radius
 
 ```html
 <template>
   <!-- This button will have no right borderRadius -->
-  <c-button rounded-right="0">Button 1</c-button>
+  <CButton rounded-right="0">Button 1</CButton>
 
   <!-- This button will have no left borderRadius*/ -->
-  <c-button rounded-left="0">Button 2</c-button>
+  <CButton rounded-left="0">Button 2</CButton>
 
   <!-- top left and top right radius will be `theme.radii.md` => 4px -->
-  <c-button rounded-top="md">Button 2</c-button>
+  <CButton rounded-top="md">Button 2</CButton>
 </template>
 ```
 
 | Prop                      | CSS Property                                                                 | Theme Field |
 | ------------------------- | ---------------------------------------------------------------------------- | ----------- |
-| `borderRadius`            | `border-radius`                                                              | `radii`     |
-| `borderTopLeftRadius`     | `border-top-left-radius`                                                     | `radii`     |
-| `borderTopStartRadius`    | `border-top-left-radius` in LTR,<br/> `border-top-right-radius` in RTL       | `radii`     |
-| `borderTopRightRadius`    | `border-top-right-radius`                                                    | `radii`     |
-| `borderTopEndRadius`      | `border-top-right-radius` in LTR,<br/> `border-top-left-radius` in RTL       | `radii`     |
-| `borderBottomRightRadius` | `border-bottom-right-radius`                                                 | `radii`     |
-| `borderBottomEndRadius`   | `border-bottom-right-radius` in LTR,<br/> `border-bottom-left-radius` in RTL | `radii`     |
-| `borderBottomLeftRadius`  | `border-bottom-left-radius`                                                  | `radii`     |
-| `borderBottomStartRadius` | `border-bottom-left-radius` in LTR,<br/> `border-bottom-left-radius` in RTL  | `radii`     |
-| `borderTopRadius`         | `border-top-left-radius` + `border-top-right-radius`                         | `radii`     |
-| `borderRightRadius`       | `border-top-right-radius` + `border-bottom-right-radius`                     | `radii`     |
-| `borderEndRadius`         | `border-top-right-radius` + `border-bottom-right-radius`                     | `radii`     |
-| `borderBottomRadius`      | `border-bottom-left-radius` + `border-bottom-right-radius`                   | `radii`     |
-| `borderLeftRadius`        | `border-top-left-radius` + `border-bottom-left-radius`                       | `radii`     |
-| `borderStartRadius`       | `border-top-left-radius` + `border-bottom-left-radius`                       | `radii`     |
+| `border-radius`            | `border-radius`                                                              | `radii`     |
+| `border-top-left-radius`     | `border-top-left-radius`                                                     | `radii`     |
+| `border-top-start-radius`    | `border-top-left-radius` in LTR,<br/> `border-top-right-radius` in RTL       | `radii`     |
+| `border-top-right-radius`    | `border-top-right-radius`                                                    | `radii`     |
+| `border-top-end-radius`      | `border-top-right-radius` in LTR,<br/> `border-top-left-radius` in RTL       | `radii`     |
+| `border-bottom-right-radius` | `border-bottom-right-radius`                                                 | `radii`     |
+| `border-bottom-end-radius`   | `border-bottom-right-radius` in LTR,<br/> `border-bottom-left-radius` in RTL | `radii`     |
+| `border-bottom-left-radius`  | `border-bottom-left-radius`                                                  | `radii`     |
+| `border-bottom-start-radius` | `border-bottom-left-radius` in LTR,<br/> `border-bottom-left-radius` in RTL  | `radii`     |
+| `border-top-radius`         | `border-top-left-radius` + `border-top-right-radius`                         | `radii`     |
+| `border-right-radius`       | `border-top-right-radius` + `border-bottom-right-radius`                     | `radii`     |
+| `border-end-radius`         | `border-top-right-radius` + `border-bottom-right-radius`                     | `radii`     |
+| `border-bottom-radius`      | `border-bottom-left-radius` + `border-bottom-right-radius`                   | `radii`     |
+| `border-left-radius`        | `border-top-left-radius` + `border-bottom-left-radius`                       | `radii`     |
+| `border-start-radius`       | `border-top-left-radius` + `border-bottom-left-radius`                       | `radii`     |
 
 ### Position
 
 ```html
 <template>
   <!-- verbose -->
-  <c-box position="absolute">Cover</c-box>
+  <CBox position="absolute">Cover</CBox>
   
   <!-- shorthand -->
-  <c-box pos="absolute">Cover</c-box>
+  <CBox pos="absolute">Cover</CBox>
   
-  <c-box pos="absolute" top="0" left="0">
+  <CBox pos="absolute" top="0" left="0">
     Absolute with top and left
-  </c-box>
+  </CBox>
   
-  <c-box pos="fixed" w="100%" zIndex="2">
+  <CBox pos="fixed" w="100%" z-index="2">
     Fixed with zIndex
-  </c-box>
+  </CBox>
 </template>
 ```
 
 | Prop             | CSS Property | Theme Field |
 | ---------------- | ------------ | ----------- |
 | `pos`,`position` | `position`   | none        |
-| `zIndex`         | `z-index`    | `zIndices`  |
+| `z-index`         | `z-index`    | `zIndices`  |
 | `top`            | `top`        | `space`     |
 | `right`          | `right`      | `space`     |
 | `bottom`         | `bottom`     | `space`     |
@@ -401,19 +401,19 @@ each group.
   <!-- verbose -->
   <!-- text-shadow will be `theme.shadows.sm` -->
   <!-- box-shadow will be `theme.shadows.md` -->
-  <c-box text-shadow="sm" box-shadow="md" />
+  <CBox text-shadow="sm" box-shadow="md" />
   
   <!-- raw CSS values -->
-  <c-text text-shadow="2px 2px #ff0000" box-shadow="5px 10px #888888">
+  <CText text-shadow="2px 2px #ff0000" box-shadow="5px 10px #888888">
     Text with shadows
-  </c-text>
+  </CText>
 </template>
 ```
 
 | Prop                  | CSS Property  | Theme Field |
 | --------------------- | ------------- | ----------- |
-| `textShadow`          | `text-shadow` | `shadows`   |
-| `shadow`, `boxShadow` | `box-shadow`  | `shadows`   |
+| `text-shadow`          | `text-shadow` | `shadows`   |
+| `shadow`, `box-shadow` | `box-shadow`  | `shadows`   |
 
 ### Filter
 
@@ -436,18 +436,18 @@ const basicBoxStyles = {
 </script>
   
 <template>
-  <c-flex flex-wrap="wrap" gap="24px" justify-content="space-evenly">
+  <CFlex flex-wrap="wrap" gap="24px" justify-content="space-evenly">
     <!-- adding filter property to the element -->
-    <c-box :sx="basicBoxStyles" filter="grayscale(80%)"> Box with Filter </c-box>
+    <CBox :sx="basicBoxStyles" filter="grayscale(80%)"> Box with Filter </CBox>
     
     <!-- adding blur property to the element -->
-    <c-box :sx="basicBoxStyles" filter="auto" blur="2px"> Box with Blur </c-box>
+    <CBox :sx="basicBoxStyles" filter="auto" blur="2px"> Box with Blur </CBox>
     
     <!-- adding brightness property to the element -->
-    <c-box :sx="basicBoxStyles" filter="auto" brightness="40%">
+    <CBox :sx="basicBoxStyles" filter="auto" brightness="40%">
       Box with Brightness
-    </c-box>
-  </c-flex>
+    </CBox>
+  </CFlex>
 </template>
 ```
 
@@ -477,28 +477,28 @@ const innerBoxStyles = {
 </script>
   
 <template>
-  <c-flex flex-wrap="wrap" gap="24px" justify-content="space-evenly">
+  <CFlex flex-wrap="wrap" gap="24px" justify-content="space-evenly">
     <!-- adding backdrop-filter property to the element -->
-    <c-box :sx="outerBoxStyles">
-      <c-box :sx="innerBoxStyles" backdrop-filter="invert(100%)">
+    <CBox :sx="outerBoxStyles">
+      <CBox :sx="innerBoxStyles" backdrop-filter="invert(100%)">
         Box with Backdrop Filter
-      </c-box>
-    </c-box>
+      </CBox>
+    </CBox>
     
     <!-- adding backdrop-blur property to the element -->
-    <c-box :sx="outerBoxStyles">
-      <c-box :sx="innerBoxStyles" backdrop-filter="auto" backdrop-blur="8px">
+    <CBox :sx="outerBoxStyles">
+      <CBox :sx="innerBoxStyles" backdrop-filter="auto" backdrop-blur="8px">
         Box with Backdrop Blur
-      </c-box>
-    </c-box>
+      </CBox>
+    </CBox>
     
     <!-- adding backdrop-contrast property to the element -->
-    <c-box :sx="outerBoxStyles">
-      <c-box :sx="innerBoxStyles" backdrop-filter="auto" backdrop-contrast="30%">
+    <CBox :sx="outerBoxStyles">
+      <CBox :sx="innerBoxStyles" backdrop-filter="auto" backdrop-contrast="30%">
         Box with Backdrop Contrast
-      </c-box>
-    </c-box>
-  </c-flex>
+      </CBox>
+    </CBox>
+  </CFlex>
 </template>
 ```
 
@@ -516,24 +516,24 @@ const innerBoxStyles = {
 | `blur`               | `filter`          | `blur`      |
 | `brightness`         | `filter`          | none        |
 | `contrast`           | `filter`          | none        |
-| `hueRotate`          | `filter`          | none        |
+| `hue-rotate`          | `filter`          | none        |
 | `invert`             | `filter`          | none        |
 | `saturate`           | `filter`          | none        |
-| `dropShadow`         | `filter`          | `shadows`   |
-| `backdropFilter`     | `backdrop-filter` | none        |
-| `backdropBlur`       | `backdrop-filter` | `blur`      |
-| `backdropBrightness` | `backdrop-filter` | none        |
-| `backdropContrast`   | `backdrop-filter` | none        |
-| `backdropHueRotate`  | `backdrop-filter` | none        |
-| `backdropInvert`     | `backdrop-filter` | none        |
-| `backdropSaturate`   | `backdrop-filter` | none        |
+| `drop-shadow`         | `filter`          | `shadows`   |
+| `backdrop-filter`     | `backdrop-filter` | none        |
+| `backdrop-blur`       | `backdrop-filter` | `blur`      |
+| `backdrop-brightness` | `backdrop-filter` | none        |
+| `backdrop-contrast`   | `backdrop-filter` | none        |
+| `backdrop-hue-rotate`  | `backdrop-filter` | none        |
+| `backdrop-invert`     | `backdrop-filter` | none        |
+| `backdrop-saturate`   | `backdrop-filter` | none        |
 
 ### Pseudo
 
 ```html
 <template>
   <!-- :hover style -->
-  <c-button
+  <CButton
     color-scheme="teal"
     :_hover="{
       background: 'white',
@@ -541,21 +541,21 @@ const innerBoxStyles = {
     }"
   >
     Hover me
-  </c-button>
+  </CButton>
   
   <!-- apply :hover over parent element -->
-  <c-box role="group">
-    <c-box
+  <CBox role="group">
+    <CBox
       :_hover="{ fontWeight: 'semibold' }"
-      :_groupHover="{ color: 'tomato' }"
+      :_group-hover="{ color: 'tomato' }"
     >
       Hello
-    </c-box>
-  </c-box>
+    </CBox>
+  </CBox>
   
   <!-- add ::before pseudo element -->
   <!-- Note: the content value needs an extra set of quotes! -->
-  <c-box
+  <CBox
     :_before="{
       content: `'🙂'`,
       display: 'inline-block',
@@ -563,7 +563,7 @@ const innerBoxStyles = {
     }"
   >
     A pseudo element
-  </c-box>
+  </CBox>
 </template>
 ```
 
@@ -573,8 +573,8 @@ const innerBoxStyles = {
 | `_active`               | `&:active`<br />`&[data-active]`                                                                                                                                                           | none        |
 | `_focus`                | `&:focus`<br />`&[data-focus]`                                                                                                                                                             | none        |
 | `_highlighted`          | `&[data-highlighted]`                                                                                                                                                                      | none        |
-| `_focusWithin`          | `&:focus-within`                                                                                                                                                                           | none        |
-| `_focusVisible`         | `&:focus-visible`                                                                                                                                                                          | none        |
+| `_focus-within`          | `&:focus-within`                                                                                                                                                                           | none        |
+| `_focus-visible`         | `&:focus-visible`                                                                                                                                                                          | none        |
 | `_disabled`             | `&[disabled]`<br />`&[aria-disabled=true]`<br />`&[data-disabled]`                                                                                                                         | none        |
 | `_readOnly`             | `&[aria-readonly=true]`<br />`&[readonly]`<br />`&[data-readonly]`                                                                                                                         | none        |
 | `_before`               | `&::before`                                                                                                                                                                                | none        |
@@ -597,34 +597,34 @@ const innerBoxStyles = {
 | `_notFirst`             | `&:not(:first-of-type)`                                                                                                                                                                    | none        |
 | `_notLast`              | `&:not(:last-of-type)`                                                                                                                                                                     | none        |
 | `_visited`              | `&:visited`                                                                                                                                                                                | none        |
-| `_activeLink`           | `&[aria-current=page]`                                                                                                                                                                     | none        |
-| `_activeStep`           | `&[aria-current=step]`                                                                                                                                                                     | none        |
+| `_active-link`           | `&[aria-current=page]`                                                                                                                                                                     | none        |
+| `_active-step`           | `&[aria-current=step]`                                                                                                                                                                     | none        |
 | `_indeterminate`        | `&:indeterminate`<br />`&[aria-checked=mixed]`<br />`&[data-indeterminate]`                                                                                                                | none        |
-| `_groupHover`           | `[role=group]:hover &`<br />`[role=group][data-hover] &`<br />`[data-group]:hover &`<br />`[data-group][data-hover] &`<br />`.group:hover &`<br />`.group[data-hover] &`                   | none        |
-| `_peerHover`            | `[data-peer]:hover ~ &`<br />`[data-peer][data-hover] ~ &`<br />`.peer:hover ~ &`<br />`.peer[data-hover] ~ &`                                                                             | none        |
-| `_groupFocus`           | `[role=group]:focus &`<br />`[role=group][data-focus] &`<br />`[data-group]:focus &`<br />`[data-group][data-focus] &`<br />`.group:focus &`<br />`.group[data-focus] &`                   | none        |
-| `_peerFocus`            | `[data-peer]:focus ~ &`<br />`[data-peer][data-focus] ~ &`<br />`.peer:focus ~ &`<br />`.peer[data-focus] ~ &`                                                                             | none        |
-| `_groupFocusVisible`    | `[role=group]:focus-visible &`<br />`[data-group]:focus-visible &`<br />`.group:focus-visible &`                                                                                           | none        |
-| `_peerFocusVisible`     | `[data-peer]:focus-visible ~ &`<br />`.peer:focus-visible ~ &`                                                                                                                             | none        |
-| `_groupActive`          | `[role=group]:active &`<br />`[role=group][data-active] &`<br />`[data-group]:active &`<br />`[data-group][data-active] &`<br />`.group:active &`<br />`.group[data-active] &`             | none        |
-| `_peerActive`           | `[data-peer]:active ~ &`<br />`[data-peer][data-active] ~ &`<br />`.peer:active ~ &`<br />`.peer[data-active] ~ &`                                                                         | none        |
-| `_groupDisabled`        | `[role=group]:disabled &`<br />`[role=group][data-disabled] &`<br />`[data-group]:disabled &`<br />`[data-group][data-disabled] &`<br />`.group:disabled &`<br />`.group[data-disabled] &` | none        |
-| `_peerDisabled`         | `[data-peer]:disabled ~ &`<br />`[data-peer][data-disabled] ~ &`<br />`.peer:disabled ~ &`<br />`.peer[data-disabled] ~ &`                                                                 | none        |
-| `_groupInvalid`         | `[role=group]:invalid &`<br />`[role=group][data-invalid] &`<br />`[data-group]:invalid &`<br />`[data-group][data-invalid] &`<br />`.group:invalid &`<br />`.group[data-invalid] &`       | none        |
-| `_peerInvalid`          | `[data-peer]:invalid ~ &`<br />`[data-peer][data-invalid] ~ &`<br />`.peer:invalid ~ &`<br />`.peer[data-invalid] ~ &`                                                                     | none        |
-| `_groupChecked`         | `[role=group]:checked &`<br />`[role=group][data-checked] &`<br />`[data-group]:checked &`<br />`[data-group][data-checked] &`<br />`.group:checked &`<br />`.group[data-checked] &`       | none        |
-| `_peerChecked`          | `[data-peer]:checked ~ &`<br />`[data-peer][data-checked] ~ &`<br />`.peer:checked ~ &`<br />`.peer[data-checked] ~ &`                                                                     | none        |
-| `_groupFocusWithin`     | `[role=group]:focus-within &`<br />`[data-group]:focus-within &`<br />`.group:focus-within &`                                                                                              | none        |
-| `_peerFocusWithin`      | `[data-peer]:focus-within ~ &`<br />`.peer:focus-within ~ &`                                                                                                                               | none        |
-| `_peerPlaceholderShown` | `[data-peer]:placeholder-shown ~ &`<br />`.peer:placeholder-shown ~ &`                                                                                                                     | none        |
+| `_group-hover`           | `[role=group]:hover &`<br />`[role=group][data-hover] &`<br />`[data-group]:hover &`<br />`[data-group][data-hover] &`<br />`.group:hover &`<br />`.group[data-hover] &`                   | none        |
+| `_peer-hover`            | `[data-peer]:hover ~ &`<br />`[data-peer][data-hover] ~ &`<br />`.peer:hover ~ &`<br />`.peer[data-hover] ~ &`                                                                             | none        |
+| `_group-focus`           | `[role=group]:focus &`<br />`[role=group][data-focus] &`<br />`[data-group]:focus &`<br />`[data-group][data-focus] &`<br />`.group:focus &`<br />`.group[data-focus] &`                   | none        |
+| `_peer-focus`            | `[data-peer]:focus ~ &`<br />`[data-peer][data-focus] ~ &`<br />`.peer:focus ~ &`<br />`.peer[data-focus] ~ &`                                                                             | none        |
+| `_group-focus-visible`    | `[role=group]:focus-visible &`<br />`[data-group]:focus-visible &`<br />`.group:focus-visible &`                                                                                           | none        |
+| `_peer-focus-visible`     | `[data-peer]:focus-visible ~ &`<br />`.peer:focus-visible ~ &`                                                                                                                             | none        |
+| `_group-active`          | `[role=group]:active &`<br />`[role=group][data-active] &`<br />`[data-group]:active &`<br />`[data-group][data-active] &`<br />`.group:active &`<br />`.group[data-active] &`             | none        |
+| `_peer-active`           | `[data-peer]:active ~ &`<br />`[data-peer][data-active] ~ &`<br />`.peer:active ~ &`<br />`.peer[data-active] ~ &`                                                                         | none        |
+| `_group-disabled`        | `[role=group]:disabled &`<br />`[role=group][data-disabled] &`<br />`[data-group]:disabled &`<br />`[data-group][data-disabled] &`<br />`.group:disabled &`<br />`.group[data-disabled] &` | none        |
+| `_peer-disabled`         | `[data-peer]:disabled ~ &`<br />`[data-peer][data-disabled] ~ &`<br />`.peer:disabled ~ &`<br />`.peer[data-disabled] ~ &`                                                                 | none        |
+| `_group-invalid`         | `[role=group]:invalid &`<br />`[role=group][data-invalid] &`<br />`[data-group]:invalid &`<br />`[data-group][data-invalid] &`<br />`.group:invalid &`<br />`.group[data-invalid] &`       | none        |
+| `_peer-invalid`          | `[data-peer]:invalid ~ &`<br />`[data-peer][data-invalid] ~ &`<br />`.peer:invalid ~ &`<br />`.peer[data-invalid] ~ &`                                                                     | none        |
+| `_group-checked`         | `[role=group]:checked &`<br />`[role=group][data-checked] &`<br />`[data-group]:checked &`<br />`[data-group][data-checked] &`<br />`.group:checked &`<br />`.group[data-checked] &`       | none        |
+| `_peer-checked`          | `[data-peer]:checked ~ &`<br />`[data-peer][data-checked] ~ &`<br />`.peer:checked ~ &`<br />`.peer[data-checked] ~ &`                                                                     | none        |
+| `_group-focus-within`     | `[role=group]:focus-within &`<br />`[data-group]:focus-within &`<br />`.group:focus-within &`                                                                                              | none        |
+| `_peer-focus-within`      | `[data-peer]:focus-within ~ &`<br />`.peer:focus-within ~ &`                                                                                                                               | none        |
+| `_peer-placeholder-shown` | `[data-peer]:placeholder-shown ~ &`<br />`.peer:placeholder-shown ~ &`                                                                                                                     | none        |
 | `_placeholder`          | `&::placeholder`                                                                                                                                                                           | none        |
-| `_placeholderShown`     | `&:placeholder-shown`                                                                                                                                                                      | none        |
-| `_fullScreen`           | `&:fullscreen`                                                                                                                                                                             | none        |
+| `_placeholder-shown`     | `&:placeholder-shown`                                                                                                                                                                      | none        |
+| `_full-screen`           | `&:fullscreen`                                                                                                                                                                             | none        |
 | `_selection`            | `&::selection`                                                                                                                                                                             | none        |
 | `_rtl`                  | `[dir=rtl] &`<br />`&[dir=rtl]`                                                                                                                                                            | none        |
 | `_ltr`                  | `[dir=ltr] &`<br />`&[dir=ltr]`                                                                                                                                                            | none        |
-| `_mediaDark`            | `@media (prefers-color-scheme: dark)`                                                                                                                                                      | none        |
-| `_mediaReduceMotion`    | `@media (prefers-reduced-motion: reduce)`                                                                                                                                                  | none        |
+| `_media-dark`            | `@media (prefers-color-scheme: dark)`                                                                                                                                                      | none        |
+| `_media-reduce-motion`    | `@media (prefers-reduced-motion: reduce)`                                                                                                                                                  | none        |
 | `_dark`                 | `.chakra-ui-dark &`<br />`[data-theme=dark] &`<br />`&[data-theme=dark]`                                                                                                                   | none        |
 | `_light`                | `.chakra-ui-light &`<br />`[data-theme=light] &`<br />`&[data-theme=light]`                                                                                                                | none        |
 
@@ -639,20 +639,20 @@ following props:
 | `appearance`      | `appearance`       | none        |
 | `content`         | `content`          | none        |
 | `transform`       | `transform`        | none        |
-| `transformOrigin` | `transform-origin` | none        |
+| `transform-origin` | `transform-origin` | none        |
 | `visibility`      | `visibility`       | none        |
-| `whiteSpace`      | `white-space`      | none        |
-| `userSelect`      | `user-select`      | none        |
-| `pointerEvents`   | `pointer-events`   | none        |
-| `wordBreak`       | `word-break`       | none        |
-| `overflowWrap`    | `overflow-wrap`    | none        |
-| `textOverflow`    | `text-overflow`    | none        |
-| `boxSizing`       | `box-sizing`       | none        |
+| `white-space`      | `white-space`      | none        |
+| `user-select`      | `user-select`      | none        |
+| `pointer-events`   | `pointer-events`   | none        |
+| `word-break`       | `word-break`       | none        |
+| `overflow-wrap`    | `overflow-wrap`    | none        |
+| `text-overflow`    | `text-overflow`    | none        |
+| `box-sizing`       | `box-sizing`       | none        |
 | `cursor`          | `cursor`           | none        |
 | `resize`          | `resize`           | none        |
 | `transition`      | `transition`       | none        |
-| `objectFit`       | `object-fit`       | none        |
-| `objectPosition`  | `object-position`  | none        |
+| `object-fit`       | `object-fit`       | none        |
+| `object-position`  | `object-position`  | none        |
 | `float`           | `float`            | none        |
 | `fill`            | `fill`             | `colors`    |
 | `stroke`          | `stroke`           | `colors`    |
@@ -668,7 +668,7 @@ link instead. You can compose `a` and `Button` like this:
 
 ```html
 <template>
-  <c-button as="router-link" to="/about">About Page Button</c-button>
+  <CButton as="router-link" to="/about">About Page Button</CButton>
 </template>
 ```
 
diff --git a/content/2.styled-system/2.responsive-styles.md b/content/2.styled-system/2.responsive-styles.md
index 2ee6332..3409936 100644
--- a/content/2.styled-system/2.responsive-styles.md
+++ b/content/2.styled-system/2.responsive-styles.md
@@ -36,14 +36,14 @@ is the recommended method.
 Let's say you have a `CBox` with the following properties:
 
 ```html
-<c-box bg="red.200" w="400px"> This is a box </c-box>
+<CBox bg="red.200" w="400px"> This is a box </CBox>
 ```
 
 To make the `width` or `w` responsive using the array syntax, here's what you
 need to do:
 
 ```html
-<c-box bg="red.200" :w="[300, 400, 500]"> This is a box </c-box>
+<CBox bg="red.200" :w="[300, 400, 500]"> This is a box </CBox>
 ```
 
 To interpret array responsive values, Chakra UI Vue converts the values defined in
@@ -81,16 +81,16 @@ undefined alias key will define the base, non-responsive value.
 Let's say you have a `CText` that looks like this:
 
 ```html
-<c-text fontSize="40px">This is a text</c-text>
+<CText font-size="40px">This is a text</CText>
 ```
 
-To make the `fontSize` responsive using the object syntax, here's what you need
+To make the `font-size` responsive using the object syntax, here's what you need
 to do:
 
 ```html
-<c-text :fontSize="{ base: '24px', md: '40px', lg: '56px' }">
+<CText :font-size="{ base: '24px', md: '40px', lg: '56px' }">
   This is responsive text
-</c-text>
+</CText>
 ```
 
 > **Remember, Chakra UI Vue uses the min-width media query for responsive design**.
@@ -109,7 +109,7 @@ change the style of most properties at a given breakpoint.
 
 ```html
 <div>
-  <c-box
+  <CBox
     :height="{
       base: '100%', // 0-48em
       md: '50%', // 48em-80em,
@@ -124,11 +124,11 @@ change the style of most properties at a given breakpoint.
     ]"
   />
   {/* responsive font size */}
-  <c-box :fontSize="['sm', 'md', 'lg', 'xl']">Font Size</c-box>
+  <CBox :font-size="['sm', 'md', 'lg', 'xl']">Font Size</CBox>
   {/* responsive margin */}
-  <c-box :mt="[2, 4, 6, 8]" width="full" height="24px" bg="tomato" />
+  <CBox :mt="[2, 4, 6, 8]" width="full" height="24px" bg="tomato" />
   {/* responsive padding */}
-  <c-box bg="papayawhip" :p="[2, 4, 6, 8]"> Padding </c-box>
+  <CBox bg="papayawhip" :p="[2, 4, 6, 8]"> Padding </CBox>
 </div>
 ```
 
@@ -138,7 +138,7 @@ This shortcut is an alternative to writing media queries out by hand. Given the
 following:
 
 ```html
-<c-box :width="[1, 1 / 2, 1 / 4]" />
+<CBox :width="[1, 1 / 2, 1 / 4]" />
 ```
 
 It'll generate a CSS that looks like this
@@ -181,7 +181,7 @@ md: '768px', lg: '960px', xl: '1200px', '2xl': '1536px', } // 3. Extend the
 theme const theme = extendTheme({ breakpoints }) // 4. Now you can use the
 custom breakpoints
 <template>
-  <c-box :width="{ base: '100%', sm: '50%', md: '25%' }" />
+  <CBox :width="{ base: '100%', sm: '50%', md: '25%' }" />
 </template>
 ```
 
@@ -196,39 +196,39 @@ on small screens, and a side-by-side layout on larger screens **(resize your
 browser to see it in action)**:
 
 ```html
-<c-box p="4" :display="{ md: 'flex' }">
-  <c-box flexShrink="0">
-    <c-image
-      borderRadius="lg"
+<CBox p="4" :display="{ md: 'flex' }">
+  <CBox flex-shrink="0">
+    <CImage
+      border-radius="lg"
       :width="{ md: 40 }"
       src="https://bit.ly/2jYM25F"
       alt="Woman paying for a purchase"
     />
-  </c-box>
-  <c-box :mt="{ base: 4, md: 0 }" :ml="{ md: 6 }">
-    <c-text
-      fontWeight="bold"
-      textTransform="uppercase"
-      fontSize="sm"
-      letterSpacing="wide"
+  </CBox>
+  <CBox :mt="{ base: 4, md: 0 }" :ml="{ md: 6 }">
+    <CText
+      font-weight="bold"
+      text-transform="uppercase"
+      font-size="sm"
+      letter-spacing="wide"
       color="teal.600"
     >
       Marketing
-    </c-text>
-    <c-link
+    </CText>
+    <CLink
       mt="1"
       display="block"
-      fontSize="lg"
-      lineHeight="normal"
-      fontWeight="semibold"
+      font-size="lg"
+      line-height="normal"
+      font-weight="semibold"
       href="#"
     >
       Finding customers for your new business
-    </c-link>
-    <c-text mt="2" color="gray.500">
+    </CLink>
+    <CText mt="2" color="gray.500">
       Getting a new business off the ground is a lot of hard work. Here are five
       ideas you can use to find your first customers.
-    </c-text>
-  </c-box>
-</c-box>
+    </CText>
+  </CBox>
+</CBox>
 ```
diff --git a/content/4.components/accordion.md b/content/4.components/accordion.md
index 67db1d4..276f0ee 100644
--- a/content/4.components/accordion.md
+++ b/content/4.components/accordion.md
@@ -40,26 +40,26 @@ By default, only one item may be expanded and it can only be collapsed again by
 ::
 
 ```html
-<c-accordion>
-  <c-accordion-item>
-    <c-accordion-button>
+<CAccordion>
+  <CAccordionItem>
+    <CAccordionButton>
       Watercraft
-    </c-accordion-button>
-    <c-accordion-panel> Sample accordion content </c-accordion-panel>
-  </c-accordion-item>
-  <c-accordion-item>
-    <c-accordion-button>
+    </CAccordionButton>
+    <CAccordionPanel> Sample accordion content </CAccordionPanel>
+  </CAccordionItem>
+  <CAccordionItem>
+    <CAccordionButton>
       Automobiles
-    </c-accordion-button>
-    <c-accordion-panel> Sample accordion content </c-accordion-panel>
-  </c-accordion-item>
-  <c-accordion-item>
-    <c-accordion-button>
+    </CAccordionButton>
+    <CAccordionPanel> Sample accordion content </CAccordionPanel>
+  </CAccordionItem>
+  <CAccordionItem>
+    <CAccordionButton>
       Aircrafts
-    </c-accordion-button>
-    <c-accordion-panel> Sample accordion content </c-accordion-panel>
-  </c-accordion-item>
-</c-accordion>
+    </CAccordionButton>
+    <CAccordionPanel> Sample accordion content </CAccordionPanel>
+  </CAccordionItem>
+</CAccordion>
 ```
 
 ## Expand multiple items at once
@@ -74,26 +74,26 @@ If you set `allow-multiple` to `true` then the accordion will permit multiple it
 ::
 
 ```html
-<c-accordion allow-multiple>
-  <c-accordion-item>
-    <c-accordion-button>
+<CAccordion allow-multiple>
+  <CAccordionItem>
+    <CAccordionButton>
       Watercraft
-    </c-accordion-button>
-    <c-accordion-panel> Sample accordion content </c-accordion-panel>
-  </c-accordion-item>
-  <c-accordion-item>
-    <c-accordion-button>
+    </CAccordionButton>
+    <CAccordionPanel> Sample accordion content </CAccordionPanel>
+  </CAccordionItem>
+  <CAccordionItem>
+    <CAccordionButton>
       Automobiles
-    </c-accordion-button>
-    <c-accordion-panel> Sample accordion content </c-accordion-panel>
-  </c-accordion-item>
-  <c-accordion-item>
-    <c-accordion-button>
+    </CAccordionButton>
+    <CAccordionPanel> Sample accordion content </CAccordionPanel>
+  </CAccordionItem>
+  <CAccordionItem>
+    <CAccordionButton>
       Aircrafts
-    </c-accordion-button>
-    <c-accordion-panel> Sample accordion content </c-accordion-panel>
-  </c-accordion-item>
-</c-accordion>
+    </CAccordionButton>
+    <CAccordionPanel> Sample accordion content </CAccordionPanel>
+  </CAccordionItem>
+</CAccordion>
 ```
 
 ## Toggle each accordion item
@@ -108,26 +108,26 @@ If you set `allow-toggle` to `true`, any expanded item may be collapsed again.
 ::
 
 ```html
-<c-accordion allow-toggle>
-  <c-accordion-item>
-    <c-accordion-button>
+<CAccordion allow-toggle>
+  <CAccordionItem>
+    <CAccordionButton>
       Watercraft
-    </c-accordion-button>
-    <c-accordion-panel> Sample accordion content </c-accordion-panel>
-  </c-accordion-item>
-  <c-accordion-item>
-    <c-accordion-button>
+    </CAccordionButton>
+    <CAccordionPanel> Sample accordion content </CAccordionPanel>
+  </CAccordionItem>
+  <CAccordionItem>
+    <CAccordionButton>
       Automobiles
-    </c-accordion-button>
-    <c-accordion-panel> Sample accordion content </c-accordion-panel>
-  </c-accordion-item>
-  <c-accordion-item>
-    <c-accordion-button>
+    </CAccordionButton>
+    <CAccordionPanel> Sample accordion content </CAccordionPanel>
+  </CAccordionItem>
+  <CAccordionItem>
+    <CAccordionButton>
       Aircrafts
-    </c-accordion-button>
-    <c-accordion-panel> Sample accordion content </c-accordion-panel>
-  </c-accordion-item>
-</c-accordion>
+    </CAccordionButton>
+    <CAccordionPanel> Sample accordion content </CAccordionPanel>
+  </CAccordionItem>
+</CAccordion>
 ```
 
 ## Styling the expanded state
diff --git a/content/4.components/alert.md b/content/4.components/alert.md
index 1f6b5af..bf5a634 100644
--- a/content/4.components/alert.md
+++ b/content/4.components/alert.md
@@ -38,10 +38,10 @@ You can use the `CAlertTitle` and `CAlertDescription` component to display an al
 ::
 
 ```html
-<c-alert status="success">
-  <c-alert-title>Updated Successfully</c-alert-title>
-  <c-alert-description>Click to view your profile</c-alert-description>
-</c-alert>
+<CAlert status="success">
+  <CAlertTitle>Updated Successfully</CAlertTitle>
+  <CAlertDescription>Click to view your profile</CAlertDescription>
+</CAlert>
 ```
 
 ### With Icon
@@ -54,27 +54,27 @@ Icons are defined based on the `status` props passed in the `CAlert` component.
 ::
 
 ```html
-<c-alert variant="left-accent" status="info" mb="3">
-  <c-alert-icon mr="2" />
-  <c-alert-description> Please,updat your KYC. </c-alert-description>
-</c-alert>
-
-<c-alert variant="left-accent" status="warning" mb="3">
-  <c-alert-icon mr="2" />
-  <c-alert-description> Incorrect Password </c-alert-description>
-</c-alert>
-
-<c-alert variant="left-accent" status="success" mb="3">
-  <c-alert-icon mr="2" />
-  <c-alert-description>
-    Congratulations!. You scored above 75%
-  </c-alert-description>
-</c-alert>
-
-<c-alert variant="left-accent" status="error" mb="3">
-  <c-alert-icon mr="2" />
-  <c-alert-description> Access revoked!</c-alert-description>
-</c-alert>
+<CAlert variant="left-accent" status="info" mb="3">
+  <CAlertIcon mr="2" />
+  <CAlertDescription> Please,update your KYC. </CAlertDescription>
+</CAlert>
+
+<CAlert variant="left-accent" status="warning" mb="3">
+  <CAlertIcon mr="2" />
+  <CAlertDescription> Incorrect Password </CAlertDescription>
+</CAlert>
+
+<CAlert variant="left-accent" status="success" mb="3">
+  <CAlertIcon mr="2" />
+  <CAlertDescription>
+    Congratulations! You scored above 75%
+  </CAlertDescription>
+</CAlert>
+
+<CAlert variant="left-accent" status="error" mb="3">
+  <CAlertIcon mr="2" />
+  <CAlertDescription> Access revoked!</CAlertDescription>
+</CAlert>
 ```
 
 ### With Status
@@ -87,19 +87,19 @@ This alert offers the `status` prop to define severity or success based by color
 ::
 
 ```html
-<c-alert status="info" mb="3"
-  ><c-alert-icon mr="2" /> Please update your KYC.</c-alert
->
-<c-alert status="success" mb="3"
-  ><c-alert-icon mr="2" />
-  Your Info has been saved successfully.
-</c-alert>
-<c-alert status="warning" mb="3"
-  ><c-alert-icon mr="2" /> Unable to process request
-</c-alert>
-<c-alert status="error" mb="3"
-  ><c-alert-icon mr="2" /> Password is Incorrect!.
-</c-alert>
+<CAlert status="info" mb="3">
+  <CAlertIcon mr="2" /> Please update your KYC.
+</CAlert>
+<CAlert status="success" mb="3">
+  <CAlertIcon mr="2" />
+  Your info has been saved successfully.
+</CAlert>
+<CAlert status="warning" mb="3"
+  ><CAlertIcon mr="2" /> Unable to process request
+</CAlert>
+<CAlert status="error" mb="3"
+  ><CAlertIcon mr="2" /> Password is Incorrect!.
+</CAlert>
 ```
 
 ### With Accent
@@ -112,25 +112,25 @@ You can use the`variant` props on the `CAlert` to create variant styles. The `va
 ::
 
 ```html
-<c-alert variant="solid" status="success">
-  <c-alert-icon mr="2" />
-  <c-alert-description> Submitted Successfully! </c-alert-description>
-</c-alert>
-
-<c-alert variant="subtle" status="success" mb="3">
-  <c-alert-icon mr="2" />
-  <c-alert-description> Submitted Successfully! </c-alert-description>
-</c-alert>
-
-<c-alert variant="left-accent" status="success" mb="3">
-  <c-alert-icon mr="2" />
-  <c-alert-description> Submitted Successfully! </c-alert-description>
-</c-alert>
-
-<c-alert variant="top-accent" status="success" mb="3">
-  <c-alert-icon mr="2" />
-  <c-alert-description> Submitted Successfully! </c-alert-description>
-</c-alert>
+<CAlert variant="solid" status="success">
+  <CAlertIcon mr="2" />
+  <CAlertDescription> Submitted Successfully! </CAlertDescription>
+</CAlert>
+
+<CAlert variant="subtle" status="success" mb="3">
+  <CAlertIcon mr="2" />
+  <CAlertDescription> Submitted Successfully! </CAlertDescription>
+</CAlert>
+
+<CAlert variant="left-accent" status="success" mb="3">
+  <CAlertIcon mr="2" />
+  <CAlertDescription> Submitted Successfully! </CAlertDescription>
+</CAlert>
+
+<CAlert variant="top-accent" status="success" mb="3">
+  <CAlertIcon mr="2" />
+  <CAlertDescription> Submitted Successfully! </CAlertDescription>
+</CAlert>
 ```
 
 ## Composition
@@ -143,7 +143,7 @@ You can use the`variant` props on the `CAlert` to create variant styles. The `va
 ::
 
 ```html
-<c-alert
+<CAlert
   variant="subtle"
   status="success"
   flex-direction="column"
@@ -153,16 +153,16 @@ You can use the`variant` props on the `CAlert` to create variant styles. The `va
   justify-content="center"
   w="full"
 >
-  <c-alert-icon box-size="40px" />
-  <c-alert-title mt="4" mb="1" font-size="lg"
-    >Application Submitted!</c-alert-title
-  >
-  <c-alert-description max-width="sm" mt="auto" font-weight="normal"
+  <CAlertIcon box-size="40px" />
+  <CAlertTitle mt="4" mb="1" font-size="lg">
+    Application Submitted!
+  </CAlertTitle>
+  <CAlertDescription max-width="sm" mt="auto" font-weight="normal"
     >Our team will review your application. If you are found a fit for this
     role, someone will be in touch with you. Please do well to stay in touch
-    with our Jobs page</c-alert-description
-  >
-</c-alert>
+    with our Jobs page
+  </CAlertDescription>
+</CAlert>
 ```
 
 `CAlert` can as well be used with other Chakra-Vue components, let's for example use the `CButton` alongside the `CAlert`.
@@ -174,7 +174,7 @@ You can use the`variant` props on the `CAlert` to create variant styles. The `va
 
 ```javascript
 <template>
-  <c-button
+  <CButton
     v-if="!showAlert"
     @click="showAlert = true"
     border="1px solid rgba(47, 43, 67, 0.1)"
@@ -185,9 +185,9 @@ You can use the`variant` props on the `CAlert` to create variant styles. The `va
     bg="transparent"
   >
     Show alert
-  </c-button>
-  <c-alert
-    v-if="showAlert"
+  </CButton>
+  <CAlert
+    vIf="showAlert"
     status="warning"
     variant="subtle"
     flex-direction="column"
@@ -195,21 +195,21 @@ You can use the`variant` props on the `CAlert` to create variant styles. The `va
     justify-content="center"
     text-align="center"
   >
-    <c-alert-icon />
-    <c-alert-title mt="4" mb="1" font-size="lg"
-      >Before Submitting</c-alert-title
-    >
-    <c-alert-description max-width="sm" mt="auto" font-weight="normal">
+    <CAlertIcon />
+    <CAlertTitle mt="4" mb="1" font-size="lg">
+      Before Submitting
+    </CAlertTitle>
+    <CAlertDescription max-width="sm" mt="auto" font-weight="normal">
       Kindly note that this decision cannot be reversed, once you submit, your
       results are uploaded to the database.
-    </c-alert-description>
-    <c-button-group variant="outline" mt="4">
-      <c-button color-scheme="blue" @click="showAlert = false"
-        >Proceed</c-button
-      >
-      <c-button @click="showAlert = false">Cancel</c-button>
-    </c-button-group>
-  </c-alert>
+    </CAlertDescription>
+    <CButtonGroup variant="outline" mt="4">
+      <CButton color-scheme="blue" @click="showAlert = false">
+        Proceed
+      </CButton>
+      <CButton @click="showAlert = false">Cancel</CButton>
+    </CButtonGroup>
+  </CAlert>
 </template>
 
 <script setup>
diff --git a/content/4.components/avatar.md b/content/4.components/avatar.md
index c198141..6dde29f 100644
--- a/content/4.components/avatar.md
+++ b/content/4.components/avatar.md
@@ -25,7 +25,7 @@ import { CAvatar, CAvatarBadge, CAvatarGroup } from '@chakra-ui/vue-next';
 ### Default :
 
 ```html
-<c-avatar
+<CAvatar
   name="Evan You"
   alt="Evan You"
   src="https://www.github.com/yyx990803.png"
@@ -53,7 +53,7 @@ The avatar component comes in 7 different sizes (`2xs`|`xs` | `sm` | `md` | `lg`
 ::
 
 ```html
-<c-avatar
+<CAvatar
   name="Evan You"
   alt="Evan You"
   src="https://avatars.githubusercontent.com/u/499550?v=4"
@@ -78,12 +78,12 @@ You can customize the fallback Avatar either by using style props or by passing
 
 ```html
 <!-- Styles props -->
-<c-avatar size="md" bg="red.500" />
+<CAvatar size="md" bg="red.500" />
 
 <!-- Custom default icon -->
-<c-avatar>
-  <c-icon color="white" name="star" />
-</c-avatar>
+<CAvatar>
+  <CIcon color="white" name="star" />
+</CAvatar>
 ```
 
 ### Avatar with badges
@@ -116,9 +116,9 @@ The badge is by default on the bottom right corner, but you can change its posit
 
 
 ```html
-<c-avatar name="Jonathan Bakebwa">
-  <c-avatar-badge bg="red.500" placement="top-start" />
-</c-avatar>
+<CAvatar name="Jonathan Bakebwa">
+  <CAvatarBadge bg="red.500" placement="top-start" />
+</CAvatar>
 ```
 
 You can also add icons inside the badge if needed :
@@ -131,15 +131,15 @@ You can also add icons inside the badge if needed :
 ::
 
 ```html
-<c-avatar
+<CAvatar
   name="Jonathan Bakebwa"
   alt="Jonathan Bakebwa"
   src="https://avatars.githubusercontent.com/u/21237954?v=4"
 >
-  <c-avatar-badge bg="red.500">
-    <c-icon color="white" name="minus" w="0.3em" />
-  </c-avatar-badge>
-</c-avatar>
+  <CAvatarBadge bg="red.500">
+    <CIcon color="white" name="minus" w="0.3em" />
+  </CAvatarBadge>
+</CAvatar>
 ```
 
 ### Avatar Group
@@ -156,28 +156,28 @@ In some cases, you might need to stack avatars as a group. Use the `CAvatarGroup
 ::
 
 ```html
-<c-avatar-group max="3" size="lg">
-  <c-avatar
+<CAvatar-group max="3" size="lg">
+  <CAvatar
     name="Segun Adebayo"
     src="https://avatars.githubusercontent.com/u/6916170?v=4"
     alt="Segun Adebayo"
   />
-  <c-avatar
+  <CAvatar
     name="Evan You"
     alt="Evan You"
     src="https://avatars.githubusercontent.com/u/499550?v=4"
   />
-  <c-avatar
+  <CAvatar
     name="Anthony Fu"
     src="https://avatars.githubusercontent.com/u/11247099?v=4"
     alt="Anthony Fu"
   />
-  <c-avatar
+  <CAvatar
     name="Maya Shavin"
     src="https://avatars.githubusercontent.com/u/6650139?v=4"
     alt="Maya Shavin"
   />
-</c-avatar-group>
+</CAvatar-group>
 ```
 
 ### Initials
diff --git a/content/4.components/breadcrumb.md b/content/4.components/breadcrumb.md
index d09a51a..76ba960 100644
--- a/content/4.components/breadcrumb.md
+++ b/content/4.components/breadcrumb.md
@@ -36,17 +36,17 @@ import {
 When you use the `is-current-page` prop on a `CBreadcrumbItem`, it tells the `CBreadcrumbLink` that it represents the current page.
 
 ```html
-<c-breadcrumb>
-  <c-breadcrumb-item>
-    <c-breadcrumb-link href="#">Home</c-breadcrumb-link>
-  </c-breadcrumb-item>
-  <c-breadcrumb-item>
-    <c-breadcrumb-link href="#">Docs</c-breadcrumb-link>
-  </c-breadcrumb-item>
-  <c-breadcrumb-item is-current-page>
-    <c-breadcrumb-link href="#">About</c-breadcrumb-link>
-  </c-breadcrumb-item>
-</c-breadcrumb>
+<CBreadcrumb>
+  <CBreadcrumbItem>
+    <CBreadcrumbLink href="#">Home</CBreadcrumbLink>
+  </CBreadcrumbItem>
+  <CBreadcrumbItem>
+    <CBreadcrumbLink href="#">Docs</CBreadcrumbLink>
+  </CBreadcrumbItem>
+  <CBreadcrumbItem is-current-page>
+    <CBreadcrumbLink href="#">About</CBreadcrumbLink>
+  </CBreadcrumbItem>
+</CBreadcrumb>
 ```
 
 ### With Separators
@@ -61,17 +61,17 @@ Breadcrumb separators can be used in four ways, either as default separator, wit
 ::
 
 ```html
-<c-breadcrumb>
-  <c-breadcrumb-item>
-    <c-breadcrumb-link href="#">Home</c-breadcrumb-link>
-  </c-breadcrumb-item>
-  <c-breadcrumb-item>
-    <c-breadcrumb-link href="#">Docs</c-breadcrumb-link>
-  </c-breadcrumb-item>
-  <c-breadcrumb-item is-current-page>
-    <c-breadcrumb-link href="#">About</c-breadcrumb-link>
-  </c-breadcrumb-item>
-</c-breadcrumb>
+<CBreadcrumb>
+  <CBreadcrumbItem>
+    <CBreadcrumbLink href="#">Home</CBreadcrumbLink>
+  </CBreadcrumbItem>
+  <CBreadcrumbItem>
+    <CBreadcrumbLink href="#">Docs</CBreadcrumbLink>
+  </CBreadcrumbItem>
+  <CBreadcrumbItem is-current-page>
+    <CBreadcrumbLink href="#">About</CBreadcrumbLink>
+  </CBreadcrumbItem>
+</CBreadcrumb>
 ```
 
 #### Using functional separator
@@ -82,17 +82,17 @@ Breadcrumb separators can be used in four ways, either as default separator, wit
 ::
 
 ```html
-<c-breadcrumb :separator="Sun">
-  <c-breadcrumb-item>
-    <c-breadcrumb-link href="#">Home</c-breadcrumb-link>
-  </c-breadcrumb-item>
-  <c-breadcrumb-item>
-    <c-breadcrumb-link href="#">Docs</c-breadcrumb-link>
-  </c-breadcrumb-item>
-  <c-breadcrumb-item is-current-page>
-    <c-breadcrumb-link href="#">About</c-breadcrumb-link>
-  </c-breadcrumb-item>
-</c-breadcrumb>
+<CBreadcrumb :separator="Sun">
+  <CBreadcrumbItem>
+    <CBreadcrumbLink href="#">Home</CBreadcrumbLink>
+  </CBreadcrumbItem>
+  <CBreadcrumbItem>
+    <CBreadcrumbLink href="#">Docs</CBreadcrumbLink>
+  </CBreadcrumbItem>
+  <CBreadcrumbItem is-current-page>
+    <CBreadcrumbLink href="#">About</CBreadcrumbLink>
+  </CBreadcrumbItem>
+</CBreadcrumb>
 ```
 
 #### Using String as separator
@@ -103,17 +103,17 @@ Breadcrumb separators can be used in four ways, either as default separator, wit
 ::
 
 ```html
-<c-breadcrumb separator=">">
-  <c-breadcrumb-item>
-    <c-breadcrumb-link href="#">Home</c-breadcrumb-link>
-  </c-breadcrumb-item>
-  <c-breadcrumb-item>
-    <c-breadcrumb-link href="#">Docs</c-breadcrumb-link>
-  </c-breadcrumb-item>
-  <c-breadcrumb-item is-current-page>
-    <c-breadcrumb-link href="#">About</c-breadcrumb-link>
-  </c-breadcrumb-item>
-</c-breadcrumb>
+<CBreadcrumb separator=">">
+  <CBreadcrumbItem>
+    <CBreadcrumbLink href="#">Home</CBreadcrumbLink>
+  </CBreadcrumbItem>
+  <CBreadcrumbItem>
+    <CBreadcrumbLink href="#">Docs</CBreadcrumbLink>
+  </CBreadcrumbItem>
+  <CBreadcrumbItem is-current-page>
+    <CBreadcrumbLink href="#">About</CBreadcrumbLink>
+  </CBreadcrumbItem>
+</CBreadcrumb>
 ```
 
 #### Using slot
@@ -124,20 +124,20 @@ Breadcrumb separators can be used in four ways, either as default separator, wit
 ::
 
 ```html
-<c-breadcrumb>
+<CBreadcrumb>
   <template v-slot:separator>
-    <c-icon name="chevron-right" />
+    <CIcon name="chevron-right" />
   </template>
-  <c-breadcrumb-item>
-    <c-breadcrumb-link href="#">Home</c-breadcrumb-link>
-  </c-breadcrumb-item>
-  <c-breadcrumb-item>
-    <c-breadcrumb-link href="#">Docs</c-breadcrumb-link>
-  </c-breadcrumb-item>
-  <c-breadcrumb-item is-current-page>
-    <c-breadcrumb-link href="#">About</c-breadcrumb-link>
-  </c-breadcrumb-item>
-</c-breadcrumb>
+  <CBreadcrumbItem>
+    <CBreadcrumbLink href="#">Home</CBreadcrumbLink>
+  </CBreadcrumbItem>
+  <CBreadcrumbItem>
+    <CBreadcrumbLink href="#">Docs</CBreadcrumbLink>
+  </CBreadcrumbItem>
+  <CBreadcrumbItem is-current-page>
+    <CBreadcrumbLink href="#">About</CBreadcrumbLink>
+  </CBreadcrumbItem>
+</CBreadcrumb>
 ```
 
 ## Composition
@@ -150,17 +150,17 @@ You can easily style and customize the breadcrumb by passing styles props to the
 ::
 
 ```html
-<c-breadcrumb font-size="sm" font-weight="semibold" color="red.500">
-  <c-breadcrumb-item>
-    <c-breadcrumb-link href="#">Home</c-breadcrumb-link>
-  </c-breadcrumb-item>
-  <c-breadcrumb-item>
-    <c-breadcrumb-link href="#">Docs</c-breadcrumb-link>
-  </c-breadcrumb-item>
-  <c-breadcrumb-item is-current-page>
-    <c-breadcrumb-link href="#">About</c-breadcrumb-link>
-  </c-breadcrumb-item>
-</c-breadcrumb>
+<CBreadcrumb font-size="sm" font-weight="semibold" color="red.500">
+  <CBreadcrumbItem>
+    <CBreadcrumbLink href="#">Home</CBreadcrumbLink>
+  </CBreadcrumbItem>
+  <CBreadcrumbItem>
+    <CBreadcrumbLink href="#">Docs</CBreadcrumbLink>
+  </CBreadcrumbItem>
+  <CBreadcrumbItem is-current-page>
+    <CBreadcrumbLink href="#">About</CBreadcrumbLink>
+  </CBreadcrumbItem>
+</CBreadcrumb>
 ```
 
 ## With Vue Routing
@@ -169,26 +169,26 @@ You can use the `CBreadcrumbLink` with the vue-router by passing the `as` prop t
 
 ```js
 <template>
-<c-breadcrumb>
+<CBreadcrumb>
   <template v-slot:separator>
-    <c-icon name="chevron-right" />
+    <CIcon name="chevron-right" />
   </template>
-  <c-breadcrumb-item>
-    <c-breadcrumb-link as="router-link" to="/components/breadcrumb">
+  <CBreadcrumbItem>
+    <CBreadcrumbLink as="router-link" to="/components/breadcrumb">
       Home
-    </c-breadcrumb-link>
-  </c-breadcrumb-item>
-  <c-breadcrumb-item>
-    <c-breadcrumb-link as="router-link" to="/components/breadcrumb">
+    </CBreadcrumbLink>
+  </CBreadcrumbItem>
+  <CBreadcrumbItem>
+    <CBreadcrumbLink as="router-link" to="/components/breadcrumb">
       Docs
-    </c-breadcrumb-link>
-  </c-breadcrumb-item>
-  <c-breadcrumb-item is-current-page>
-    <c-breadcrumb-link as="router-link" to="/">
+    </CBreadcrumbLink>
+  </CBreadcrumbItem>
+  <CBreadcrumbItem is-current-page>
+    <CBreadcrumbLink as="router-link" to="/">
       About
-    </c-breadcrumb-link>
-  </c-breadcrumb-item>
-</c-breadcrumb>
+    </CBreadcrumbLink>
+  </CBreadcrumbItem>
+</CBreadcrumb>
 <template>
 ```
 
diff --git a/content/4.components/button.md b/content/4.components/button.md
index ec4166f..fdb77da 100644
--- a/content/4.components/button.md
+++ b/content/4.components/button.md
@@ -43,10 +43,10 @@ Use the size prop to change the size of the button. You can set the value to `xs
 ::
 
 ```html
-<c-button size="xs" mr="3" color-scheme="teal"> Button </c-button>
-<c-button size="sm" mr="3" color-scheme="teal"> Button </c-button>
-<c-button size="md" mr="3" color-scheme="teal"> Button </c-button>
-<c-button size="lg" mr="3" color-scheme="teal"> Button </c-button>
+<CButton size="xs" mr="3" color-scheme="teal"> Button </CButton>
+<CButton size="sm" mr="3" color-scheme="teal"> Button </CButton>
+<CButton size="md" mr="3" color-scheme="teal"> Button </CButton>
+<CButton size="lg" mr="3" color-scheme="teal"> Button </CButton>
 ```
 
 ### Button Variants
@@ -59,11 +59,11 @@ You can change the button style to either `solid` `ghost` `outline` or `link` by
 ::
 
 ```html
-<c-button mr="3" variant="luxury"> Button </c-button>
-<c-button mr="3" variant="solid" color-scheme="teal"> Button </c-button>
-<c-button mr="3" variant="outline" color-scheme="teal"> Button </c-button>
-<c-button mr="3" variant="ghost" color-scheme="teal"> Button </c-button>
-<c-button mr="3" variant="link" color-scheme="teal"> Button </c-button>
+<CButton mr="3" variant="luxury"> Button </CButton>
+<CButton mr="3" variant="solid" color-scheme="teal"> Button </CButton>
+<CButton mr="3" variant="outline" color-scheme="teal"> Button </CButton>
+<CButton mr="3" variant="ghost" color-scheme="teal"> Button </CButton>
+<CButton mr="3" variant="link" color-scheme="teal"> Button </CButton>
 ```
 
 ### Button with Icon
@@ -76,12 +76,12 @@ You can change the button style to either `solid` `ghost` `outline` or `link` by
 ::
 
 ```html
-<c-button mr="3" left-icon="email" variant="solid" color-scheme="teal">
+<CButton mr="3" left-icon="email" variant="solid" color-scheme="teal">
   Base button
-</c-button>
-<c-button mr="3" right-icon="star" variant="outline" color-scheme="teal">
+</CButton>
+<CButton mr="3" right-icon="star" variant="outline" color-scheme="teal">
   Base button
-</c-button>
+</CButton>
 ```
 
 ### Button Loading State
@@ -94,7 +94,7 @@ You can set the loading props on a button when it is loading,to indicate it is c
 ::
 
 ```html
-<c-button
+<CButton
   mr="3"
   :is-loading="isLoading"
   color-scheme="teal"
@@ -105,8 +105,8 @@ You can set the loading props on a button when it is loading,to indicate it is c
   @click="doTask"
 >
   Click me
-</c-button>
-<c-button
+</CButton>
+<CButton
   mr="3"
   :is-loading="isLoading"
   @click="doTask"
@@ -115,7 +115,7 @@ You can set the loading props on a button when it is loading,to indicate it is c
   font-size="sm"
 >
   Click me
-</c-button>
+</CButton>
 ```
 
 ### Button Group
@@ -132,10 +132,10 @@ You can use the `CButtonGroup` component to group buttons. When you use the Butt
 ::
 
 ```html
-<c-button-group variant="outline">
-  <c-button color-scheme="blue">Proceed</c-button>
-  <c-button>Cancel</c-button>
-</c-button-group>
+<CButtonGroup variant="outline">
+  <CButton color-scheme="blue">Proceed</CButton>
+  <CButton>Cancel</CButton>
+</CButtonGroup>
 ```
 
 ## Accessibility
@@ -153,7 +153,7 @@ All props you pass `variant`, `colorScheme`, `size` etc are converted to style p
 ::
 
 ```html
-<c-button
+<CButton
   size="md"
   height="48px"
   width="200px"
@@ -163,7 +163,7 @@ All props you pass `variant`, `colorScheme`, `size` etc are converted to style p
   variant="outline"
 >
   Button
-</c-button>
+</CButton>
 ```
 
 ## Customizable Button
@@ -176,7 +176,7 @@ You can pass-in other props to make fully customizable buttons, you can do this
 ::
 
 ```html
-<c-button
+<CButton
   border="1px solid rgba(47, 43, 67, 0.1)"
   border-radius="12px"
   mr="3"
@@ -186,5 +186,5 @@ You can pass-in other props to make fully customizable buttons, you can do this
   size="lg"
 >
   Button
-</c-button>
+</CButton>
 ```
diff --git a/content/4.components/checkbox.md b/content/4.components/checkbox.md
index aadc11d..7ae36eb 100644
--- a/content/4.components/checkbox.md
+++ b/content/4.components/checkbox.md
@@ -25,7 +25,7 @@ import { CCheckbox, CCheckboxGroup } from '@chakra-ui/vue'
 ::
 
 ```html
-<c-checkbox default-checked> Simple checkbox </c-checkbox>
+<CCheckbox default-checked> Simple checkbox </CCheckbox>
 ```
 
 ### Disabled Checkbox
@@ -35,13 +35,13 @@ import { CCheckbox, CCheckboxGroup } from '@chakra-ui/vue'
 ::
 
 ```html
-<c-checkbox is-disabled> Disabled checkbox </c-checkbox> 
-<c-checkbox is-disabled default-checked> Disabled checked </c-checkbox>
+<CCheckbox is-disabled> Disabled checkbox </CCheckbox> 
+<CCheckbox is-disabled default-checked> Disabled checked </CCheckbox>
 ```
 
 ### Checkbox with custom color
 
-You can override the color scheme of the `c-checkbox` to any color key specified
+You can override the color scheme of the `CCheckbox` to any color key specified
 in `theme.colors`.
 
 ::showcase
@@ -49,19 +49,19 @@ in `theme.colors`.
 ::
 
 ```html
-<c-stack spacing="5" direction="row">
-  <c-checkbox color-scheme='red' default-checked>
+<CStack spacing="5" direction="row">
+  <CCheckbox color-scheme='red' default-checked>
     Red
-  </c-checkbox>
-  <c-checkbox color-scheme='green' default-checked>
+  </CCheckbox>
+  <CCheckbox color-scheme='green' default-checked>
     Green
-  </c-checkbox>
-</c-stack>
+  </CCheckbox>
+</CStack>
 ```
 
 ### Checkbox sizes
 
-Pass the `size` prop to change the size of the `c-checkbox`. Values can be either
+Pass the `size` prop to change the size of the `CCheckbox`. Values can be either
 `sm`, `md` or `lg`.
 
 ::showcase
@@ -69,17 +69,17 @@ Pass the `size` prop to change the size of the `c-checkbox`. Values can be eithe
 ::
 
 ```html
-<c-wrap spacing="5" direction="row" align="center">
-  <c-checkbox size='sm' color-scheme='red'>
-    c-checkbox
-  </c-checkbox>
-  <c-checkbox size='md' color-scheme='green' default-checked>
-    c-checkbox
-  </c-checkbox>
-  <c-checkbox size='lg' color-scheme='orange' default-checked>
-    c-checkbox
-  </c-checkbox>
-</c-wrap>
+<CWrap spacing="5" direction="row" align="center">
+  <CCheckbox size='sm' color-scheme='red'>
+    CCheckbox
+  </CCheckbox>
+  <CCheckbox size='md' color-scheme='green' default-checked>
+    CCheckbox
+  </CCheckbox>
+  <CCheckbox size='lg' color-scheme='orange' default-checked>
+    CCheckbox
+  </CCheckbox>
+</CWrap>
 ```
 
 ### Invalid Checkbox
@@ -91,12 +91,12 @@ Pass the `size` prop to change the size of the `c-checkbox`. Values can be eithe
 ::
 
 ```html
-<c-checkbox is-invalid> Invalid checkbox </c-checkbox>
+<CCheckbox is-invalid> Invalid checkbox </CCheckbox>
 ```
 
 ### Changing the spacing
 
-We added the `spacing` prop to customize the spacing between the `c-checkbox` and
+We added the `spacing` prop to customize the spacing between the `CCheckbox` and
 label text.
 
 ::showcase
@@ -106,7 +106,7 @@ label text.
 ::
 
 ```html
-<c-checkbox spacing='1rem'> Option </c-checkbox>
+<CCheckbox spacing='1rem'> Option </CCheckbox>
 ```
 
 ### Changing the icon color and size
@@ -121,9 +121,9 @@ You can customize the color and size of the check icon by passing the
 ::
 
 ```html
-<c-checkbox icon-color='purple.500' icon-size='1rem' color-scheme="white">
+<CCheckbox icon-color='purple.500' icon-size='1rem' color-scheme="white">
   Option
-</c-checkbox>
+</CCheckbox>
 ```
 
 ### Indeterminate
@@ -134,8 +134,8 @@ You can customize the color and size of the check icon by passing the
 
 ```html
 <template>
-  <c-stack>
-    <c-checkbox
+  <CStack>
+    <CCheckbox
       v-model="allChecked"
       :is-indeterminate="isIndeterminate"
       @change="
@@ -145,9 +145,9 @@ You can customize the color and size of the check icon by passing the
       "
     >
       Parent checkbox
-    </c-checkbox>
-    <c-stack pl="6" mt="1" spacing="1">
-      <c-checkbox
+    </CCheckbox>
+    <CStack pl="6" mt="1" spacing="1">
+      <CCheckbox
         :model-value="checkedItems[0]"
         @change="
           (value) => {
@@ -156,8 +156,8 @@ You can customize the color and size of the check icon by passing the
         "
       >
         Child Checkbox 1
-      </c-checkbox>
-      <c-checkbox
+      </CCheckbox>
+      <CCheckbox
         :model-value="checkedItems[1]"
         @change="
           (value) => {
@@ -166,15 +166,15 @@ You can customize the color and size of the check icon by passing the
         "
       >
         Child Checkbox 2
-      </c-checkbox>
-    </c-stack>
-  </c-stack>
+      </CCheckbox>
+    </CStack>
+  </CStack>
 </template>
 
 <script lang="ts" setup>
 import { computed, ref } from "vue"
 
-import { CCheckbox } from "@chakra-ui/vue-next"
+import { CCheckbox, CStack } from "@chakra-ui/vue-next"
 
 const checkedItems = ref([false, false])
 function setCheckedItems(value: boolean[]) {
@@ -200,11 +200,11 @@ shared styling props.
 ::
 
 ```html
-  <c-checkbox-group v-model="items" color-scheme="blue" size="lg">
-    <c-stack>
-      <c-checkbox value="naruto"> Naruto </c-checkbox>
-      <c-checkbox value="sasuke"> Sasuke </c-checkbox>
-      <c-checkbox value="kakashi"> Kakashi </c-checkbox>
-    </c-stack>
-  </c-checkbox-group>
+  <CCheckboxGroup v-model="items" color-scheme="blue" size="lg">
+    <CStack>
+      <CCheckbox value="naruto"> Naruto </CCheckbox>
+      <CCheckbox value="sasuke"> Sasuke </CCheckbox>
+      <CCheckbox value="kakashi"> Kakashi </CCheckbox>
+    </CStack>
+  </CCheckboxGroup>
 ```
\ No newline at end of file
diff --git a/content/4.components/closebutton.md b/content/4.components/closebutton.md
index e4c736d..b230fbd 100644
--- a/content/4.components/closebutton.md
+++ b/content/4.components/closebutton.md
@@ -28,7 +28,7 @@ Simply display the close button by using the `CCloseButton` component
 ::
 
 ```html
-<c-close-button @click="handleClose" />
+<CCloseButton @click="handleClose" />
 ```
 
 ### Button Size
@@ -41,11 +41,11 @@ You can adjust the button sizes by passing the `size` prop as either `sm`,`md`,
 ::
 
 ```html
-<c-stack>
-  <c-close-button size="sm" @click="handleClose" />
-  <c-close-button size="md" @click="handleClose" />
-  <c-close-button size="lg" @click="handleClose" />
-</c-stack>
+<CStack>
+  <CCloseButton size="sm" @click="handleClose" />
+  <CCloseButton size="md" @click="handleClose" />
+  <CCloseButton size="lg" @click="handleClose" />
+</CStack>
 ```
 
 ## Composition
diff --git a/content/4.components/input.md b/content/4.components/input.md
index 8176e4d..8738ce1 100644
--- a/content/4.components/input.md
+++ b/content/4.components/input.md
@@ -25,7 +25,7 @@ Here's a basic usage example of the `CInput` component:
 ::
 
 ```html
-    <c-input placeholder="Basic usage" />
+    <CInput placeholder="Basic usage" />
 ```
 
 
@@ -43,12 +43,12 @@ The `Input` component comes in four sizes. The default is `md`.
 ::
 
 ```html
-<c-stack spacing="3" w="2xl" align-items="center">
-    <c-input placeholder="extra small size" size="xs" />
-    <c-input placeholder="small size" size="sm" />
-    <c-input placeholder="medium size" size="md" />
-    <c-input placeholder="large size" size="lg" />
-</c-stack>
+<CStack spacing="3" w="2xl" align-items="center">
+    <CInput placeholder="extra small size" size="xs" />
+    <CInput placeholder="small size" size="sm" />
+    <CInput placeholder="medium size" size="md" />
+    <CInput placeholder="large size" size="lg" />
+</CStack>
 ```
 
 If you want to use the native DOM `size` attribute you can use the `htmlSize` prop. For it to work as expected you will also need to provide the `width` prop set to `auto`.
@@ -59,7 +59,7 @@ If you want to use the native DOM `size` attribute you can use the `htmlSize` pr
 ::
 
 ```html
-<c-input html-size="4" width="auto" />
+<CInput html-size="4" width="auto" />
 ```
 
 
@@ -73,12 +73,12 @@ The input component comes in 4 variants: `outline`, `unstyled`, `flushed`, and `
 ::
 
 ```html
-<c-stack spacing="3" w="2xl" align-items="center">
-    <c-input variant='outline' placeholder='Outline' />
-    <c-input variant='filled' placeholder='Filled' />
-    <c-input variant='flushed' placeholder='Flushed' />
-    <c-input variant='unstyled' placeholder='Unstyled' />
-</c-stack>
+<CStack spacing="3" w="2xl" align-items="center">
+    <CInput variant='outline' placeholder='Outline' />
+    <CInput variant='filled' placeholder='Filled' />
+    <CInput variant='flushed' placeholder='Flushed' />
+    <CInput variant='unstyled' placeholder='Unstyled' />
+</CStack>
 ```
 
 
@@ -93,18 +93,18 @@ Like bootstrap, you can add addons to the left and right of the `Input` componen
 
 
 ```html
-<c-stack spacing="4" w="xl" align-items="center">
-    <c-input-group>
-        <c-input-left-addon>+234</c-input-left-addon>
-        <c-input type="tel" rounded-left="0" placeholder="phone number" />
-    </c-input-group>
-
-    <c-input-group>
-        <c-input-left-addon>https://</c-input-left-addon>
-        <c-input rounded="0" placeholder="mysite" />
-        <c-input-right-addon>.com</c-input-right-addon>
-    </c-input-group>
-</c-stack>
+<CStack spacing="4" w="xl" align-items="center">
+    <CInputGroup>
+        <CInputLeftAddon>+234</CInputLeftAddon>
+        <CInput type="tel" rounded-left="0" placeholder="phone number" />
+    </CInputGroup>
+
+    <CInputGroup>
+        <CInputLeftAddon>https://</CInputLeftAddon>
+        <CInput rounded="0" placeholder="mysite" />
+        <CInputRightAddon>.com</CInputRightAddon>
+    </CInputGroup>
+</CStack>
 ```
 
 ## Add elements inside Input
@@ -119,18 +119,18 @@ If the left or right is an icon or text, you can pass `pointerEvents="none"` to
 ::
 
 ```html
-<c-stack spacing="4" w="xl" align-items="center">
-    <c-input-group>
-        <c-input-left-element><c-icon name="phone" color="gray.300" /></c-input-left-element>
-        <c-input type="phone" placeholder="Phone number" />
-    </c-input-group>
-
-    <c-input-group>
-        <c-input-left-element color="gray.300" fontSize="1.2em">¥</c-input-left-element>
-        <c-input placeholder="Enter amount" />
-        <c-input-right-element><c-icon name="check" color="green.500" /></c-input-right-element>
-    </c-input-group>
-</c-stack>
+<CStack spacing="4" w="xl" align-items="center">
+    <CInputGroup>
+        <CInputLeftElement><CIcon name="phone" color="gray.300" /></CInputLeftElement>
+        <CInput type="phone" placeholder="Phone number" />
+    </CInputGroup>
+
+    <CInputGroup>
+        <CInputLeftElement color="gray.300" fontSize="1.2em">¥</CInputLeftElement>
+        <CInput placeholder="Enter amount" />
+        <CInputRightElement><CIcon name="check" color="green.500" /></CInputRightElement>
+    </CInputGroup>
+</CStack>
 ```
 
 
@@ -145,18 +145,18 @@ Let's use these components to create a password input with a show/hide password
 
 ```html
 <template>
-    <c-input-group size="md">
-        <c-input pr="4.5rem" :type="show ? 'text' : 'password'" placeholder="Enter password" v-model="password" />
-        <c-input-right-element width="4.5rem">
-            <c-button h="1.75rem" size="sm" @click="show = !show">
+    <CInputGroup size="md">
+        <CInput pr="4.5rem" :type="show ? 'text' : 'password'" placeholder="Enter password" v-model="password" />
+        <CInputRightElement width="4.5rem">
+            <CButton h="1.75rem" size="sm" @click="show = !show">
                 {{ show ? 'Hide' : 'Show' }}
-            </c-button>
-        </c-input-right-element>
-    </c-input-group>
+            </CButton>
+        </CInputRightElement>
+    </CInputGroup>
 </template>
   
 <script setup>
-    import { CInput, CInputGroup, CInputRightElement } from '@chakra-ui/vue-next';
+    import { CInput, CInputGroup, CInputRightElement, CButton } from '@chakra-ui/vue-next';
     const show = ref(false);
     const password = ref('kurama<3naruto');
 </script>
@@ -173,12 +173,12 @@ You can change the border color that shows when the input receives focus (`focus
 ::
 
 ```html
-<c-stack spacing="4" w="xl" align-items="center">
-    <c-input focus-border-color="lime" placeholder="Here is a sample placeholder" />
-    <c-input focus-border-color="pink.400" placeholder="Here is a sample placeholder" />
-    <c-input is-invalid error-border-color="red.300" placeholder="Here is a sample placeholder" />
-    <c-input is-invalid error-border-color="crimson" placeholder="Here is a sample placeholder" />
-</c-stack>
+<CStack spacing="4" w="xl" align-items="center">
+    <CInput focus-border-color="lime" placeholder="Here is a sample placeholder" />
+    <CInput focus-border-color="pink.400" placeholder="Here is a sample placeholder" />
+    <CInput is-invalid error-border-color="red.300" placeholder="Here is a sample placeholder" />
+    <CInput is-invalid error-border-color="crimson" placeholder="Here is a sample placeholder" />
+</CStack>
 ```
 
 
@@ -193,10 +193,10 @@ The placeholder of an input can be styled by using the `_placeholder` prop. Per
 
 ```html
 <c-stack spacing="4" w="xl" align-items="center">
-    <c-input placeholder='default placeholder' />
-    <c-input placeholder='custom placeholder' :_placeholder="{ opacity: 1, color: 'gray.500' }" />
-    <c-input color='teal' placeholder='custom placeholder' :_placeholder="{ color: 'inherit' }" />
-    <c-input color='tomato' placeholder='custom placeholder' :_placeholder="{ opacity: 0.4, color: 'inherit' }" />
+    <CInput placeholder='default placeholder' />
+    <CInput placeholder='custom placeholder' :_placeholder="{ opacity: 1, color: 'gray.500' }" />
+    <CInput color='teal' placeholder='custom placeholder' :_placeholder="{ color: 'inherit' }" />
+    <CInput color='tomato' placeholder='custom placeholder' :_placeholder="{ opacity: 0.4, color: 'inherit' }" />
 </c-stack>
 ```
 
@@ -213,7 +213,7 @@ Date and Time Picker
 ::
 
 ```html
-<c-input type="datetime-local" placeholder="Select Date and Time" size="md" />
+<CInput type="datetime-local" placeholder="Select Date and Time" size="md" />
 ```
 
 Check for different input types available : https://developer.mozilla.org/en-US/docs/Web/HTML/Element/Input#input_types
diff --git a/content/4.components/tag.md b/content/4.components/tag.md
index 4f1e31d..55faa1b 100644
--- a/content/4.components/tag.md
+++ b/content/4.components/tag.md
@@ -29,7 +29,7 @@ This package exports the following components :
 ::
 
 ```html
-<c-tag>Sample Tag</c-tag>
+<CTag>Sample Tag</CTag>
 ```
 
 ### With custom attributes :
@@ -41,7 +41,7 @@ This package exports the following components :
 ::
 
 ```html
-<c-tag size="md" variant="solid" color-scheme="teal">Sample Tag</c-tag>
+<CTag size="md" variant="solid" color-scheme="teal">Sample Tag</CTag>
 ```
 
 ## With different sizes : 
@@ -61,9 +61,9 @@ This package exports the following components :
 ::
 
 ```html
-<c-tag size="sm" variant="solid" color-scheme="teal">Sample Tag</c-tag>
-<c-tag size="md" variant="solid" color-scheme="teal">Sample Tag</c-tag>
-<c-tag size="lg" variant="solid" color-scheme="teal">Sample Tag</c-tag>
+<CTag size="sm" variant="solid" color-scheme="teal">Sample Tag</CTag>
+<CTag size="md" variant="solid" color-scheme="teal">Sample Tag</CTag>
+<CTag size="lg" variant="solid" color-scheme="teal">Sample Tag</CTag>
 ```
 
 ### With left icon
@@ -92,18 +92,18 @@ This package exports the following components :
 ::
 
 ```html
-<c-tag size="sm" color-scheme="purple">
-  <c-tag-left-icon name="add" />
-  <c-tag-label>Sample Tag</c-tag-label>
-</c-tag>
-<c-tag size="md" color-scheme="purple">
-  <c-tag-left-icon name="add" />
-  <c-tag-label>Sample Tag</c-tag-label>
-</c-tag>
-<c-tag size="lg" color-scheme="purple">
-  <c-tag-left-icon name="add" />
-  <c-tag-label>Sample Tag</c-tag-label>
-</c-tag>
+<CTag size="sm" color-scheme="purple">
+  <CTagLeftIcon name="add" />
+  <CTagLabel>Sample Tag</CTagLabel>
+</CTag>
+<CTag size="md" color-scheme="purple">
+  <CTagLeftIcon name="add" />
+  <CTagLabel>Sample Tag</CTagLabel>
+</CTag>
+<CTag size="lg" color-scheme="purple">
+  <CTagLeftIcon name="add" />
+  <CTagLabel>Sample Tag</CTagLabel>
+</CTag>
 ```
 
 ### With right icon
@@ -132,10 +132,10 @@ This package exports the following components :
 ::
 
 ```html
-<c-tag size="lg" variant="solid" color-scheme="green">
-  <c-tag-label>Sample Tag</c-tag-label>
-  <c-tag-right-icon name="check"/>
-</c-tag>
+<CTag size="lg" variant="solid" color-scheme="green">
+  <CTagLabel>Sample Tag</CTagLabel>
+  <CTagRightIcon name="check"/>
+</CTag>
 ```
 
 ### With close button
@@ -164,20 +164,20 @@ This package exports the following components :
 ::
 
 ```html
-<c-tag size="sm" color-scheme="blue">
-  <c-tag-label>Sample Tag</c-tag-label>
-  <c-tag-close-button />
-</c-tag>
-
-<c-tag size="md" color-scheme="blue">
-  <c-tag-label>Sample Tag</c-tag-label>
-  <c-tag-close-button />
-</c-tag>
-
-<c-tag size="lg" color-scheme="blue">
-  <c-tag-label>Sample Tag</c-tag-label>
-  <c-tag-close-button />
-</c-tag>
+<CTag size="sm" color-scheme="blue">
+  <CTag-label>Sample Tag</CTag-label>
+  <CTag-close-button />
+</CTag>
+
+<CTag size="md" color-scheme="blue">
+  <CTag-label>Sample Tag</CTag-label>
+  <CTag-close-button />
+</CTag>
+
+<CTag size="lg" color-scheme="blue">
+  <CTag-label>Sample Tag</CTag-label>
+  <CTag-close-button />
+</CTag>
 ```
 
 ### With custom element
@@ -192,14 +192,14 @@ This package exports the following components :
 ::
 
 ```html
-<c-tag border-radius="full">
-  <c-avatar 
+<CTag border-radius="full">
+  <CAvatar 
     name="Zakaria Sahmane" 
     ml="-1"
     mr="2" 
     alt="Zakaria Sahmane" 
     src="https://avatars.githubusercontent.com/u/10008963?v=4" 
     size="xs" />
-  <c-tag-label>Sample Tag</c-tag-label>
-</c-tag>
+  <CTagLabel>Sample Tag</CTagLabel>
+</CTag>
 ```
\ No newline at end of file