diff --git a/docs/components/Footer.vue b/docs/components/Footer.vue
index 6e5b0626..6282b675 100644
--- a/docs/components/Footer.vue
+++ b/docs/components/Footer.vue
@@ -25,6 +25,8 @@
 </template>
 
 <script setup lang="ts">
+const { $ui } = useNuxtApp()
+
 const links = [{
   icon: 'i-simple-icons-figma',
   label: 'Figma Kit',
diff --git a/docs/components/Header.vue b/docs/components/Header.vue
index debeef22..41036733 100644
--- a/docs/components/Header.vue
+++ b/docs/components/Header.vue
@@ -54,6 +54,7 @@ defineProps<{
 }>()
 
 const route = useRoute()
+const { $ui } = useNuxtApp()
 const { metaSymbol } = useShortcuts()
 
 const nav = inject<Ref<NavItem[]>>('navigation')
diff --git a/docs/pages/index.vue b/docs/pages/index.vue
index 7ee29a0f..f25297d2 100644
--- a/docs/pages/index.vue
+++ b/docs/pages/index.vue
@@ -443,6 +443,7 @@ const sectionRef = ref()
 const demoRef = ref(null)
 const start = ref(0)
 
+const { $ui } = useNuxtApp()
 const { height } = useElementSize(demoRef)
 const { top } = useElementBounding(sectionRef)
 const { y } = useWindowScroll()