diff --git a/packages/docs/components/HeaderBanner.vue b/packages/docs/components/HeaderBanner.vue
index 8334b09cc0e..3b63839b40a 100644
--- a/packages/docs/components/HeaderBanner.vue
+++ b/packages/docs/components/HeaderBanner.vue
@@ -1,5 +1,5 @@
 <template>
-  <transition name="banner">
+  <Transition name="banner">
     <div
       v-if="!isHidden"
       class="header-banner"
@@ -11,8 +11,8 @@
         <div class="header-banner__left">
           <a :href="`https://github.com/epicmaxco/vuestic-ui/releases/tag/v${uiVersion}`">We just released&nbsp;<strong>Vuestic {{ uiVersion }} 🤗</strong></a>
 
-<!--          <div class="header-banner__left-links">-->
-            <!-- <a
+          <!--          <div class="header-banner__left-links">-->
+          <!-- <a
               href="https://vuejs.org/partners/epicmax.html"
               title="Epicmax creates high performance Vue.js interfaces"
               target="_blank"
@@ -34,53 +34,53 @@
               <strong>Vue.js</strong>
             </a> -->
 
-            <!-- <strong>and</strong> -->
-
-<!--            <a-->
-<!--              href="https://nuxtjs.org/partners/epicmax"-->
-<!--              title="Epicmax creates high performance Vue.js interfaces"-->
-<!--              target="_blank"-->
-<!--              class="header-banner__link"-->
-<!--            >-->
-<!--              <svg-->
-<!--                xmlns="http://www.w3.org/2000/svg"-->
-<!--                width="24"-->
-<!--                height="24"-->
-<!--                viewBox="0 0 400 420"-->
-<!--                aria-hidden="true"-->
-<!--              >-->
-<!--                <g-->
-<!--                  fill="none"-->
-<!--                  fill-rule="evenodd"-->
-<!--                >-->
-<!--                  <path-->
-<!--                    d="M123 292l-1-1c-2-4-2-8-2-12H25L167 27l59 107 19-14-59-107c-1-2-8-13-20-13-5 0-13 2-19 13L4 268c-1 2-7 14-1 24 2 5 8 10 21 10h120c-13 0-19-5-21-10z"-->
-<!--                    fill="#00C58E"-->
-<!--                  />-->
-<!--                  <path-->
-<!--                    d="M395 269L280 62c-2-2-8-13-20-13-5 0-12 2-19 13l-15 24v48l34-59 114 204h-43a20 20 0 0 1-2 12v1c-6 10-19 10-21 10h68c2 0 15 0 21-10 2-5 4-13-2-23z"-->
-<!--                    fill="#108775"-->
-<!--                  />-->
-<!--                  <path-->
-<!--                    d="M332 292v-1l1-2c1-3 2-7 1-10l-4-11-90-158-13-24h-1l-13 24-91 158-3 11a21 21 0 0 0 2 13c3 5 9 10 21 10h168c3 0 16 0 22-10zM226 134l83 145H144l82-145z"-->
-<!--                    fill="#2F495E"-->
-<!--                    fill-rule="nonzero"-->
-<!--                  />-->
-<!--                </g>-->
-<!--              </svg>-->
-<!--              <strong>Nuxt</strong>-->
-<!--            </a>-->
-<!--          </div>-->
+          <!-- <strong>and</strong> -->
+
+          <!--            <a-->
+          <!--              href="https://nuxtjs.org/partners/epicmax"-->
+          <!--              title="Epicmax creates high performance Vue.js interfaces"-->
+          <!--              target="_blank"-->
+          <!--              class="header-banner__link"-->
+          <!--            >-->
+          <!--              <svg-->
+          <!--                xmlns="http://www.w3.org/2000/svg"-->
+          <!--                width="24"-->
+          <!--                height="24"-->
+          <!--                viewBox="0 0 400 420"-->
+          <!--                aria-hidden="true"-->
+          <!--              >-->
+          <!--                <g-->
+          <!--                  fill="none"-->
+          <!--                  fill-rule="evenodd"-->
+          <!--                >-->
+          <!--                  <path-->
+          <!--                    d="M123 292l-1-1c-2-4-2-8-2-12H25L167 27l59 107 19-14-59-107c-1-2-8-13-20-13-5 0-13 2-19 13L4 268c-1 2-7 14-1 24 2 5 8 10 21 10h120c-13 0-19-5-21-10z"-->
+          <!--                    fill="#00C58E"-->
+          <!--                  />-->
+          <!--                  <path-->
+          <!--                    d="M395 269L280 62c-2-2-8-13-20-13-5 0-12 2-19 13l-15 24v48l34-59 114 204h-43a20 20 0 0 1-2 12v1c-6 10-19 10-21 10h68c2 0 15 0 21-10 2-5 4-13-2-23z"-->
+          <!--                    fill="#108775"-->
+          <!--                  />-->
+          <!--                  <path-->
+          <!--                    d="M332 292v-1l1-2c1-3 2-7 1-10l-4-11-90-158-13-24h-1l-13 24-91 158-3 11a21 21 0 0 0 2 13c3 5 9 10 21 10h168c3 0 16 0 22-10zM226 134l83 145H144l82-145z"-->
+          <!--                    fill="#2F495E"-->
+          <!--                    fill-rule="nonzero"-->
+          <!--                  />-->
+          <!--                </g>-->
+          <!--              </svg>-->
+          <!--              <strong>Nuxt</strong>-->
+          <!--            </a>-->
+          <!--          </div>-->
         </div>
 
         <div class="header-banner__buttons">
-          <va-button
+          <VaButton
             href="https://epicmax.co/?ref=vuestic-header"
             target="blank"
           >
             🔥🔥🔥 Hire us
-          </va-button>
-          <va-button
+          </VaButton>
+          <VaButton
             v-if="closeable"
             icon="close"
             preset="secondary"
@@ -93,7 +93,7 @@
         </div>
       </div>
     </div>
-  </transition>
+  </Transition>
 </template>
 
 <script setup lang="ts">
diff --git a/packages/docs/components/landing/Footer.vue b/packages/docs/components/landing/Footer.vue
index 30add6c706d..97b649466cc 100644
--- a/packages/docs/components/landing/Footer.vue
+++ b/packages/docs/components/landing/Footer.vue
@@ -19,14 +19,14 @@
                 v-for="item in items"
                 :key="item.label"
               >
-                <component
+                <Component
                   :is="item.component"
                   :[item.prop]="item.value"
                   :target="item.component === 'a' && !item.value.startsWith('mailto:') ? '_blank' : undefined"
                   class="footer__sitemap-item__list-item"
                 >
                   {{ item.label }}
-                </component>
+                </Component>
               </li>
             </ul>
           </div>
@@ -37,7 +37,7 @@
         </div>
 
         <div class="footer__buttons">
-          <va-button
+          <VaButton
             v-for="{ href, icon, label } in buttons"
             :key="label"
             class="footer__buttons__button"
@@ -47,13 +47,13 @@
             size="large"
           >
             <template #prepend>
-              <va-icon
+              <VaIcon
                 class="footer__buttons__icon"
                 :component="icon"
               />
             </template>
             {{ label }}
-          </va-button>
+          </VaButton>
         </div>
 
         <SocialsLinks class="footer__socials" />
diff --git a/packages/docs/components/layout/icons/CollapseIcon/index.vue b/packages/docs/components/layout/icons/CollapseIcon/index.vue
index 33cffeb960f..7f2f67d8366 100644
--- a/packages/docs/components/layout/icons/CollapseIcon/index.vue
+++ b/packages/docs/components/layout/icons/CollapseIcon/index.vue
@@ -17,7 +17,7 @@
 </script>
 
 <template>
-  <component
+  <Component
     :is="modelValue ? VaIconMenuCollapsed : VaIconMenu"
     :color="primary"
     class="docs-header-collapse-icon"