diff --git a/docs/components/content/examples/HorizontalNavigationExample.vue b/docs/components/content/examples/HorizontalNavigationExample.vue
index 2e0c72cf..c7d464fd 100644
--- a/docs/components/content/examples/HorizontalNavigationExample.vue
+++ b/docs/components/content/examples/HorizontalNavigationExample.vue
@@ -1,4 +1,4 @@
-<script setup>
+<script setup lang="ts">
 const route = useRoute()
 
 const links = [{
diff --git a/docs/components/content/examples/HorizontalNavigationExampleDefaultSlot.vue b/docs/components/content/examples/HorizontalNavigationExampleDefaultSlot.vue
index 80670c12..90c9aad7 100644
--- a/docs/components/content/examples/HorizontalNavigationExampleDefaultSlot.vue
+++ b/docs/components/content/examples/HorizontalNavigationExampleDefaultSlot.vue
@@ -1,4 +1,4 @@
-<script setup>
+<script setup lang="ts">
 const route = useRoute()
 
 const links = [{
diff --git a/docs/components/content/examples/HorizontalNavigationExampleSections.vue b/docs/components/content/examples/HorizontalNavigationExampleSections.vue
index 9fca52fe..f0954336 100644
--- a/docs/components/content/examples/HorizontalNavigationExampleSections.vue
+++ b/docs/components/content/examples/HorizontalNavigationExampleSections.vue
@@ -1,4 +1,4 @@
-<script setup>
+<script setup lang="ts">
 const route = useRoute()
 
 const links = [
diff --git a/docs/components/home/HomeTetris.vue b/docs/components/home/HomeTetris.vue
index 10332c24..6300c32e 100644
--- a/docs/components/home/HomeTetris.vue
+++ b/docs/components/home/HomeTetris.vue
@@ -26,7 +26,7 @@
   </Transition>
 </template>
 
-<script setup>
+<script setup lang="ts">
 import { useElementSize } from '@vueuse/core'
 
 const el = ref(null)
diff --git a/docs/content/1.getting-started/2.installation.md b/docs/content/1.getting-started/2.installation.md
index a2b2ba7f..ea9b14f5 100644
--- a/docs/content/1.getting-started/2.installation.md
+++ b/docs/content/1.getting-started/2.installation.md
@@ -206,7 +206,7 @@ An example SFC using IntelliSense (note the `/*ui*/` prefix, also works with `re
   <UCard :ui="ui" />
 </template>
 
-<script setup>
+<script setup lang="ts">
 const ui = /*ui*/ {
   background: 'bg-white dark:bg-slate-900'
 }
diff --git a/docs/content/1.getting-started/3.theming.md b/docs/content/1.getting-started/3.theming.md
index 65a6c557..4ccb9c62 100644
--- a/docs/content/1.getting-started/3.theming.md
+++ b/docs/content/1.getting-started/3.theming.md
@@ -247,7 +247,7 @@ You can easily build a color mode button by using the `useColorMode` composable
 
 #code
 ```vue
-<script setup>
+<script setup lang="ts">
 const colorMode = useColorMode()
 const isDark = computed({
   get () {
diff --git a/docs/content/1.getting-started/4.shortcuts.md b/docs/content/1.getting-started/4.shortcuts.md
index 65dfce63..88ea16ec 100644
--- a/docs/content/1.getting-started/4.shortcuts.md
+++ b/docs/content/1.getting-started/4.shortcuts.md
@@ -130,7 +130,7 @@ defineShortcuts({
 To display shortcuts in your app according to the user's OS, you can use the `useShortcuts` composable.
 
 ```vue
-<script setup>
+<script setup lang="ts">
 const { metaSymbol } = useShortcuts()
 </script>
 
diff --git a/docs/content/2.components/modal.md b/docs/content/2.components/modal.md
index 886942c4..b2a63bcc 100644
--- a/docs/content/2.components/modal.md
+++ b/docs/content/2.components/modal.md
@@ -40,7 +40,7 @@ Use the `prevent-close` prop to disable the outside click alongside the `esc` ke
 You can still handle the `esc` shortcut yourself by using our [defineShortcuts](/getting-started/shortcuts#defineshortcuts) composable.
 
 ```vue
-<script setup>
+<script setup lang="ts">
 const isOpen = ref(false)
 
 defineShortcuts({
diff --git a/docs/content/2.components/notification.md b/docs/content/2.components/notification.md
index d75df262..b0d68f88 100644
--- a/docs/content/2.components/notification.md
+++ b/docs/content/2.components/notification.md
@@ -42,7 +42,7 @@ Then, you can use the `useToast` composable to add notifications to your app:
 When using `toast.add`, this will push a new notification to the stack displayed in `<UNotifications />`. All the props of the `Notification` component can be passed to `toast.add`.
 
 ```vue
-<script setup>
+<script setup lang="ts">
 const toast = useToast()
 
 onMounted(() => {
diff --git a/docs/content/2.components/slideover.md b/docs/content/2.components/slideover.md
index 37b3a561..79bdfe13 100644
--- a/docs/content/2.components/slideover.md
+++ b/docs/content/2.components/slideover.md
@@ -40,7 +40,7 @@ Use the `prevent-close` prop to disable the outside click alongside the `esc` ke
 You can still handle the `esc` shortcut yourself by using our [defineShortcuts](/getting-started/shortcuts#defineshortcuts) composable.
 
 ```vue
-<script setup>
+<script setup lang="ts">
 const isOpen = ref(false)
 
 defineShortcuts({
diff --git a/docs/content/2.components/table.md b/docs/content/2.components/table.md
index bdc19f2c..a83a2386 100644
--- a/docs/content/2.components/table.md
+++ b/docs/content/2.components/table.md
@@ -93,7 +93,7 @@ You can specify a default sort for the table through the `sort` prop. It's an ob
 This will set the default sort and will work even if no column is set as `sortable`.
 
 ```vue
-<script setup>
+<script setup lang="ts">
 const sort = ref({
   column: 'name',
   direction: 'desc'
@@ -134,7 +134,7 @@ When fetching data from an API, we can take advantage of the [`useFetch`](https:
 When doing so, you might want to set the `sort-mode` prop to `manual` to disable the automatic sorting and return the rows as is.
 
 ```vue
-<script setup>
+<script setup lang="ts">
 // Ensure it uses `ref` instead of `reactive`.
 const sort = ref({
   column: 'name',
@@ -338,7 +338,7 @@ excludedProps:
 This can be easily used with Nuxt `useAsyncData` composable.
 
 ```vue
-<script setup>
+<script setup lang="ts">
 const columns = [...]
 
 const { pending, data: people } = await useLazyAsyncData('people', () => $fetch('/api/people'))
diff --git a/docs/pages/playground.vue b/docs/pages/playground.vue
index 8c60becb..c25f27c4 100644
--- a/docs/pages/playground.vue
+++ b/docs/pages/playground.vue
@@ -1,4 +1,4 @@
-<script setup>
+<script setup lang="ts">
 const title = 'Playground'
 const description = 'Play online with our interactive Nuxt Image playground.'
 
diff --git a/docs/pages/roadmap.vue b/docs/pages/roadmap.vue
index d26b8129..ce5e12ad 100644
--- a/docs/pages/roadmap.vue
+++ b/docs/pages/roadmap.vue
@@ -1,4 +1,4 @@
-<script setup>
+<script setup lang="ts">
 const title = 'Roadmap'
 const description = 'Discover our Volta board for @nuxt/ui development status.'