From fe348b48c69ec60c9f703eac46fb5bb831f0c8d7 Mon Sep 17 00:00:00 2001
From: KeJun <kejun1997@gmail.com>
Date: Mon, 9 Oct 2023 16:44:47 +0800
Subject: [PATCH] docs(ComponentExample): automatically read code (#789)

---
 docs/components/content/ComponentExample.vue  |  58 ++-
 docs/composables/useContentExamplesCode.ts    |  27 ++
 docs/content/1.getting-started/5.examples.md  | 128 +----
 docs/content/2.elements/1.accordion.md        | 131 +-----
 docs/content/2.elements/2.alert.md            |  22 +-
 docs/content/2.elements/6.dropdown.md         | 128 +----
 docs/content/2.elements/8.kbd.md              |  19 +-
 docs/content/3.forms/1.input.md               |  47 +-
 docs/content/3.forms/10.form.md               | 255 +---------
 docs/content/3.forms/2.textarea.md            |  16 +-
 docs/content/3.forms/3.select.md              |  48 +-
 docs/content/3.forms/4.select-menu.md         | 357 +-------------
 docs/content/3.forms/5.checkbox.md            |  16 +-
 docs/content/3.forms/6.radio.md               |  30 +-
 docs/content/3.forms/7.toggle.md              |  14 -
 docs/content/3.forms/8.range.md               |  16 +-
 docs/content/3.forms/9.form-group.md          |  43 +-
 docs/content/4.data/1.table.md                | 438 ++----------------
 .../5.navigation/1.vertical-navigation.md     | 200 +-------
 .../content/5.navigation/2.command-palette.md | 190 +-------
 docs/content/5.navigation/3.pagination.md     |  46 +-
 docs/content/5.navigation/4.tabs.md           | 304 +-----------
 docs/content/6.overlays/1.modal.md            | 177 +------
 docs/content/6.overlays/2.slideover.md        | 134 +-----
 docs/content/6.overlays/3.popover.md          |  55 +--
 docs/content/6.overlays/4.tooltip.md          |  13 +-
 docs/content/6.overlays/5.context-menu.md     |  37 +-
 docs/content/6.overlays/6.notification.md     |  86 +---
 docs/content/7.layout/1.card.md               |  18 +-
 docs/content/7.layout/2.container.md          |  12 +-
 docs/content/7.layout/3.skeleton.md           |  18 +-
 docs/content/7.layout/4.divider.md            |  69 +--
 docs/modules/content-examples-code.ts         | 138 ++++++
 docs/nuxt.config.ts                           |   3 +-
 docs/server/api/content-examples-code.get.ts  |  19 +
 35 files changed, 387 insertions(+), 2925 deletions(-)
 create mode 100644 docs/composables/useContentExamplesCode.ts
 create mode 100644 docs/modules/content-examples-code.ts
 create mode 100644 docs/server/api/content-examples-code.get.ts

diff --git a/docs/components/content/ComponentExample.vue b/docs/components/content/ComponentExample.vue
index f90db16c..774e11d9 100644
--- a/docs/components/content/ComponentExample.vue
+++ b/docs/components/content/ComponentExample.vue
@@ -1,15 +1,44 @@
 <template>
   <div class="[&>div>pre]:!rounded-t-none [&>div>pre]:!mt-0">
-    <div class="flex border border-gray-200 dark:border-gray-700 relative not-prose rounded-t-md" :class="[{ 'p-4': padding, 'rounded-b-md': !$slots.code, 'border-b-0': !!$slots.code }, backgroundClass, overflowClass]">
+    <div
+      class="flex border border-gray-200 dark:border-gray-700 relative not-prose rounded-t-md"
+      :class="[{ 'p-4': padding, 'rounded-b-md': !hasCode, 'border-b-0': hasCode }, backgroundClass, overflowClass]"
+    >
+      <component :is="camelName" v-if="component" v-bind="componentProps" />
       <ContentSlot v-if="$slots.default" :use="$slots.default" />
     </div>
-
-    <ContentSlot v-if="$slots.code" :use="$slots.code" />
+    <template v-if="hasCode">
+      <ContentSlot v-if="$slots.code" :use="$slots.code" />
+      <ContentRenderer v-else :value="ast" class="[&>div>pre]:!rounded-t-none [&>div>pre]:!mt-0" />
+    </template>
   </div>
 </template>
 
 <script setup lang="ts">
-defineProps({
+import { camelCase } from 'scule'
+import { fetchContentExampleCode } from '~/composables/useContentExamplesCode'
+// @ts-expect-error
+import { transformContent } from '@nuxt/content/transformers'
+// @ts-ignore
+import { useShikiHighlighter } from '@nuxtjs/mdc/runtime'
+
+const props = defineProps({
+  component: {
+    type: String,
+    default: null
+  },
+  componentClass: {
+    type: String,
+    default: ''
+  },
+  componentProps: {
+    type: Object,
+    default: () => ({})
+  },
+  hiddenCode: {
+    type: Boolean,
+    default: false
+  },
   padding: {
     type: Boolean,
     default: true
@@ -23,4 +52,25 @@ defineProps({
     default: ''
   }
 })
+
+const instance = getCurrentInstance()
+const camelName = camelCase(props.component)
+const data = await fetchContentExampleCode(camelName)
+
+const hasCode = computed(() => !props.hiddenCode && (data?.code || instance.slots.code))
+
+const shikiHighlighter = useShikiHighlighter({})
+const codeHighlighter = async (code: string, lang: string, theme: any, highlights: number[]) => shikiHighlighter.getHighlightedAST(code, lang, theme, { highlights })
+const { data: ast } = await useAsyncData(`content-example-${camelName}-ast`, () => transformContent('content:_markdown.md', `\`\`\`vue\n${data?.code ?? ''}\n\`\`\``, {
+  markdown: {
+    highlight: {
+      highlighter: codeHighlighter,
+      theme: {
+        light: 'material-theme-lighter',
+        default: 'material-theme',
+        dark: 'material-theme-palenight'
+      }
+    }
+  }
+}))
 </script>
diff --git a/docs/composables/useContentExamplesCode.ts b/docs/composables/useContentExamplesCode.ts
new file mode 100644
index 00000000..06030160
--- /dev/null
+++ b/docs/composables/useContentExamplesCode.ts
@@ -0,0 +1,27 @@
+const useContentExamplesCodeState = () => useState('content-examples-code', () => ({}))
+
+export async function fetchContentExampleCode (name?: string) {
+  if (!name) return
+  const state = useContentExamplesCodeState()
+
+  if (state.value[name]?.then) {
+    await state.value[name]
+    return state.value[name]
+  }
+  if (state.value[name]) { return state.value[name] }
+
+  // add to nitro prerender
+  if (process.server) {
+    const event = useRequestEvent()
+    event.node.res.setHeader(
+      'x-nitro-prerender',
+      [event.node.res.getHeader('x-nitro-prerender'), `/api/content-examples-code/${name}.json`].filter(Boolean).join(',')
+    )
+  }
+  state.value[name] = $fetch(`/api/content-examples-code/${name}.json`).then((data) => {
+    state.value[name] = data
+  })
+
+  await state.value[name]
+  return state.value[name]
+}
diff --git a/docs/content/1.getting-started/5.examples.md b/docs/content/1.getting-started/5.examples.md
index c2405c50..f90e614f 100644
--- a/docs/content/1.getting-started/5.examples.md
+++ b/docs/content/1.getting-started/5.examples.md
@@ -109,43 +109,13 @@ const attrs = [{
 
 You can use it inside a [Popover](/overlays/popover) component to display it when clicking on a [Button](/elements/button).
 
-::component-example
-#default
-:date-picker-example
-
-#code
-```vue
-<script setup>
-const date = ref(new Date())
-
-const label = computed(() => date.value.toLocaleDateString('en-us', { weekday: 'long', year: 'numeric', month: 'short', day: 'numeric' })
-)
-</script>
-
-<template>
-  <UPopover :popper="{ placement: 'bottom-start' }">
-    <UButton icon="i-heroicons-calendar-days-20-solid" :label="label" />
-
-    <template #panel="{ close }">
-      <DatePicker v-model="date" @close="close" />
-    </template>
-  </UPopover>
-</template>
-```
-::
+:component-example{component="date-picker-example"}
 
 ### Table
 
 Here is an example of a Table component with all its features implemented.
 
-::component-example
----
-padding: false
----
-
-#default
-:table-example-advanced
-::
+:component-example{component="table-example-advanced" hiddenCode :padding="false" }
 
 ::callout{icon="i-simple-icons-github" to="https://github.com/nuxt/ui/blob/dev/docs/components/content/examples/TableExampleAdvanced.vue"}
 Take a look at the component!
@@ -160,14 +130,14 @@ Our theming system provides a lot of flexibility to customize the components.
 Here is some examples of what you can do with the [CommandPalette](/navigation/command-palette).
 
 #### Algolia
-
 ::component-example
 ---
 padding: false
+component: 'command-palette-theme-algolia'
+componentProps:
+  class: 'max-h-[480px] rounded-md'
+hiddenCode: true
 ---
-
-#default
-:command-palette-theme-algolia{class="max-h-[480px] rounded-md"}
 ::
 
 ::callout{icon="i-simple-icons-github" to="https://github.com/nuxt/ui/blob/dev/docs/components/content/themes/CommandPaletteThemeAlgolia.vue#L23"}
@@ -179,10 +149,11 @@ Take a look at the component!
 ::component-example
 ---
 padding: false
+component: 'command-palette-theme-raycast'
+componentProps:
+  class: 'max-h-[480px] rounded-md'
+hiddenCode: true
 ---
-
-#default
-:command-palette-theme-raycast{class="max-h-[480px] rounded-md"}
 ::
 
 ::callout{icon="i-simple-icons-github" to="https://github.com/nuxt/ui/blob/dev/docs/components/content/themes/CommandPaletteThemeRaycast.vue#L30"}
@@ -191,81 +162,11 @@ Take a look at the component!
 
 ### VerticalNavigation
 
-::component-example
-#default
-:vertical-navigation-theme-tailwind
-#code
-```vue
-<script setup>
-const links = [{
-  label: 'Introduction',
-  to: '/getting-started'
-}, {
-  label: 'Installation',
-  to: '/getting-started/installation'
-}, {
-  label: 'Theming',
-  to: '/getting-started/theming'
-}, {
-  label: 'Shortcuts',
-  to: '/getting-started/shortcuts'
-}, {
-  label: 'Examples',
-  to: '/getting-started/examples'
-}, {
-  label: 'Roadmap',
-  to: '/getting-started/roadmap'
-}]
-</script>
-
-<template>
-  <UVerticalNavigation
-    :links="links"
-    :ui="{
-      wrapper: 'border-s border-gray-200 dark:border-gray-800 space-y-2',
-      base: 'group block border-s -ms-px lg:leading-6 before:hidden',
-      padding: 'p-0 ps-4',
-      rounded: '',
-      font: '',
-      ring: '',
-      active: 'text-primary-500 dark:text-primary-400 border-current font-semibold',
-      inactive: 'border-transparent hover:border-gray-400 dark:hover:border-gray-500 text-gray-700 hover:text-gray-900 dark:text-gray-400 dark:hover:text-gray-300'
-    }"
-  />
-</template>
-```
-::
+:component-example{component="vertical-navigation-theme-tailwind"}
 
 ### Pagination
 
-::component-example
-#default
-:pagination-theme-rounded
-#code
-```vue
-<script setup>
-const page = ref(1)
-const items = ref(Array(55))
-</script>
-
-<template>
-  <UPagination
-    v-model="page"
-    :total="items.length"
-    :ui="{
-      wrapper: 'flex items-center gap-1',
-      rounded: '!rounded-full min-w-[32px] justify-center'
-    }"
-    :prev-button="null"
-    :next-button="{
-      icon: 'i-heroicons-arrow-small-right-20-solid',
-      color: 'primary',
-      variant: 'outline'
-    }"
-  />
-</template>
-```
-::
+:component-example{component="pagination-theme-rounded"}
 
 ## RTL Support
 
@@ -273,10 +174,7 @@ Here are some examples of how components look like in RTL mode.
 
 ### Pagination
 
-::component-example
-#default
-:pagination-example-r-t-l
-::
+:component-example{component="pagination-example-r-t-l" hiddenCode}
 
 ::callout{icon="i-simple-icons-github" to="https://github.com/nuxt/ui/blob/dev/docs/components/content/examples/PaginationExampleRTL.vue"}
 Take a look at the component!
diff --git a/docs/content/2.elements/1.accordion.md b/docs/content/2.elements/1.accordion.md
index 434ac93c..d24a3dd6 100644
--- a/docs/content/2.elements/1.accordion.md
+++ b/docs/content/2.elements/1.accordion.md
@@ -19,31 +19,7 @@ Pass an array to the `items` prop of the Accordion component. Each item can have
 - `defaultOpen` - Determines whether the item is initially open or closed.
 - `closeOthers` - Determines whether the item click close others or not. **It only works with multiple mode**.
 
-::component-example
-#default
-:accordion-example-basic
-
-#code
-```vue
-<script setup>
-const items = [{
-  label: 'Getting Started',
-  icon: 'i-heroicons-information-circle',
-  defaultOpen: true,
-  content: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed neque elit, tristique placerat feugiat ac, facilisis vitae arcu. Proin eget egestas augue. Praesent ut sem nec arcu pellentesque aliquet. Duis dapibus diam vel metus tempus vulputate.'
-}, {
-  label: 'Installation',
-  icon: 'i-heroicons-arrow-down-tray',
-  disabled: true,
-  content: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed neque elit, tristique placerat feugiat ac, facilisis vitae arcu. Proin eget egestas augue. Praesent ut sem nec arcu pellentesque aliquet. Duis dapibus diam vel metus tempus vulputate.'
-}, ...]
-</script>
-
-<template>
-  <UAccordion :items="items" />
-</template>
-```
-::
+:component-example{component="accordion-example-basic"}
 
 ### Style
 
@@ -72,7 +48,7 @@ options:
       - solid
       - outline
       - ghost
-      - soft 
+      - soft
       - link
   - name: size
     restriction: included
@@ -169,112 +145,13 @@ You can use slots to customize the buttons and items content of the Accordion.
 
 Use the `#default` slot to customize the trigger buttons. You will have access to the `item`, `index`, `open` properties and `close` method in the slot scope.
 
-::component-example
-#default
-:accordion-example-default-slot
-
-#code
-```vue
-<script setup>
-const items = [...]
-</script>
-
-<template>
-  <UAccordion :items="items" :ui="{ wrapper: 'flex flex-col w-full' }">
-    <template #default="{ item, index, open }">
-      <UButton color="gray" variant="ghost" class="border-b border-gray-200 dark:border-gray-700" :ui="{ rounded :'rounded-none', padding: { sm:'p-3' } }">
-        <template #leading>
-          <div class="w-6 h-6 rounded-full bg-primary-500 dark:bg-primary-400 flex items-center justify-center -my-1">
-            <UIcon :name="item.icon" class="w-4 h-4 text-white dark:text-gray-900" />
-          </div>
-        </template>
-
-        <span class="truncate">{{ index + 1 }}. {{ item.label }}</span>
-
-        <template #trailing>
-          <UIcon
-            name="i-heroicons-chevron-right-20-solid"
-            class="w-5 h-5 ms-auto transform transition-transform duration-200"
-            :class="[open && 'rotate-90']"
-          />
-        </template>
-      </UButton>
-    </template>
-  </UAccordion>
-</template>
-```
-::
+:component-example{component="accordion-example-default-slot"}
 
 ### `item`
 
 Use the `#item` slot to customize the items content or pass a `slot` property to customize a specific item. You will have access to the `item`, `index`, `open` properties and `close` method in the slot scope.
 
-::component-example
-#default
-:accordion-example-item-slot
-
-#code
-```vue
-<script setup>
-const items = [{
-  label: 'Getting Started',
-  icon: 'i-heroicons-information-circle',
-  defaultOpen: true,
-  slot: 'getting-started'
-}, {
-  label: 'Installation',
-  icon: 'i-heroicons-arrow-down-tray',
-  defaultOpen: true,
-  slot: 'installation'
-}, {
-  label: 'Theming',
-  icon: 'i-heroicons-eye-dropper',
-  defaultOpen: true,
-  description: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed neque elit, tristique placerat feugiat ac, facilisis vitae arcu. Proin eget egestas augue. Praesent ut sem nec arcu pellentesque aliquet. Duis dapibus diam vel metus tempus vulputate.'
-}, ...]
-</script>
-
-<template>
-  <UAccordion :items="items">
-    <template #item="{ item }">
-      <p class="italic text-gray-900 dark:text-white text-center">
-        {{ item.description }}
-      </p>
-    </template>
-
-    <template #getting-started>
-      <div class="text-gray-900 dark:text-white text-center">
-        <Logo class="w-auto h-8 mx-auto" />
-
-        <p class="text-sm text-gray-500 dark:text-gray-400 mt-2">
-          Fully styled and customizable components for Nuxt.
-        </p>
-      </div>
-    </template>
-
-    <template #installation="{ description }">
-      <div class="flex flex-col justify-center items-center gap-1 mb-4">
-        <h3 class="text-xl font-bold text-gray-900 dark:text-white">
-          Installation
-        </h3>
-        <p class="text-sm text-gray-500 dark:text-gray-400">
-          Install <code>@nuxt/ui</code> dependency to your project:
-        </p>
-        <p>
-          {{ description }}
-        </p>
-      </div>
-
-      <div class="flex flex-col items-center">
-        <code>$ npm install @nuxt/ui</code>
-        <code>$ yarn add @nuxt/ui</code>
-        <code>$ pnpm add @nuxt/ui</code>
-      </div>
-    </template>
-  </UAccordion>
-</template>
-```
-::
+:component-example{component="accordion-example-item-slot"}
 
 ## Props
 
diff --git a/docs/content/2.elements/2.alert.md b/docs/content/2.elements/2.alert.md
index cf543670..aba0556d 100644
--- a/docs/content/2.elements/2.alert.md
+++ b/docs/content/2.elements/2.alert.md
@@ -83,7 +83,7 @@ options:
   - name: color
     restriction: included
     values:
-      - white  
+      - white
 excludedProps:
   - icon
 ---
@@ -161,25 +161,7 @@ Use the `#title` and `#description` slots to customize the Alert.
 
 This can be handy when you want to display HTML content. To achieve this, you can define those slots and use the `v-html` directive.
 
-::component-example
-#default
-:alert-example-html
-
-#code
-```vue
-<template>
-  <UAlert title="Heads <i>up</i>!" icon="i-heroicons-command-line">
-    <template #title="{ title }">
-      <span v-html="title" />
-    </template>
-
-    <template #description>
-      You can add <b>components</b> to your app using the <u>cli</u>.
-    </template>
-  </UAlert>
-</template>
-```
-::
+:component-example{component="alert-example-html"}
 
 ## Props
 
diff --git a/docs/content/2.elements/6.dropdown.md b/docs/content/2.elements/6.dropdown.md
index 06fae6f1..dcb8a6af 100644
--- a/docs/content/2.elements/6.dropdown.md
+++ b/docs/content/2.elements/6.dropdown.md
@@ -24,81 +24,13 @@ Pass an array of arrays to the `items` prop of the Dropdown component. Each arra
 
 You can also pass any property from the [NuxtLink](https://nuxt.com/docs/api/components/nuxt-link#props) component such as `to`, `exact`, etc.
 
-::component-example
-#default
-:dropdown-example-basic
-
-#code
-```vue
-<script setup>
-const items = [
-  [{
-    label: 'Profile',
-    avatar: {
-      src: 'https://avatars.githubusercontent.com/u/739984?v=4'
-    }
-  }], [{
-    label: 'Edit',
-    icon: 'i-heroicons-pencil-square-20-solid',
-    shortcuts: ['E'],
-    click: () => {
-      console.log('Edit')
-    }
-  }, {
-    label: 'Duplicate',
-    icon: 'i-heroicons-document-duplicate-20-solid',
-    shortcuts: ['D'],
-    disabled: true
-  }], [{
-    label: 'Archive',
-    icon: 'i-heroicons-archive-box-20-solid'
-  }, {
-    label: 'Move',
-    icon: 'i-heroicons-arrow-right-circle-20-solid'
-  }], [{
-    label: 'Delete',
-    icon: 'i-heroicons-trash-20-solid',
-    shortcuts: ['⌘', 'D']
-  }]
-]
-</script>
-
-<template>
-  <UDropdown :items="items" :popper="{ placement: 'bottom-start' }">
-    <UButton color="white" label="Options" trailing-icon="i-heroicons-chevron-down-20-solid" />
-  </UDropdown>
-</template>
-```
-::
+:component-example{component="dropdown-example-basic"}
 
 ### Mode
 
 Use the `mode` prop to switch between `click` and `hover` modes.
 
-::component-example
-#default
-:dropdown-example-mode
-
-#code
-```vue
-<script setup>
-const items = [
-  [{
-    label: 'Profile',
-    avatar: {
-      src: 'https://avatars.githubusercontent.com/u/739984?v=4'
-    }
-  }]
-]
-</script>
-
-<template>
-  <UDropdown :items="items" mode="hover" :popper="{ placement: 'bottom-start' }">
-    <UButton color="white" label="Options" trailing-icon="i-heroicons-chevron-down-20-solid" />
-  </UDropdown>
-</template>
-```
-::
+:component-example{component="dropdown-example-mode"}
 
 ## Slots
 
@@ -106,61 +38,7 @@ const items = [
 
 Use the `#item` slot to customize the items content or pass a `slot` property to customize a specific item. You will have access to the `item` property in the slot scope.
 
-::component-example
-#default
-:dropdown-example-slot
-
-#code
-```vue
-<script setup>
-const items = [
-  [{
-    label: 'ben@example.com',
-    slot: 'account',
-    disabled: true
-  }], [{
-    label: 'Settings',
-    icon: 'i-heroicons-cog-8-tooth'
-  }], [{
-    label: 'Documentation',
-    icon: 'i-heroicons-book-open'
-  }, {
-    label: 'Changelog',
-    icon: 'i-heroicons-megaphone'
-  }, {
-    label: 'Status',
-    icon: 'i-heroicons-signal'
-  }], [{
-    label: 'Sign out',
-    icon: 'i-heroicons-arrow-left-on-rectangle'
-  }]
-]
-</script>
-
-<template>
-  <UDropdown :items="items" :ui="{ item: { disabled: 'cursor-text select-text' } }" :popper="{ placement: 'bottom-start' }">
-    <UAvatar src="https://avatars.githubusercontent.com/u/739984?v=4" />
-
-    <template #account="{ item }">
-      <div class="text-left">
-        <p>
-          Signed in as
-        </p>
-        <p class="truncate font-medium text-gray-900 dark:text-white">
-          {{ item.label }}
-        </p>
-      </div>
-    </template>
-
-    <template #item="{ item }">
-      <span class="truncate">{{ item.label }}</span>
-
-      <UIcon :name="item.icon" class="flex-shrink-0 h-4 w-4 text-gray-400 dark:text-gray-500 ms-auto" />
-    </template>
-  </UDropdown>
-</template>
-```
-::
+:component-example{component="dropdown-example-slot"}
 
 ## Props
 
diff --git a/docs/content/2.elements/8.kbd.md b/docs/content/2.elements/8.kbd.md
index 4e109507..eb03f953 100644
--- a/docs/content/2.elements/8.kbd.md
+++ b/docs/content/2.elements/8.kbd.md
@@ -32,24 +32,7 @@ props:
 
 As explained in the [Shortcuts](/getting-started/shortcuts) page, you can use the `metaSymbol` property of the `useShortcuts` composable to display the meta key according to the user's OS.
 
-::component-example
-#default
-:kbd-example
-
-#code
-```vue
-<script setup>
-const { metaSymbol } = useShortcuts()
-</script>
-
-<template>
-  <div class="flex items-center gap-0.5">
-    <UKbd>{{ metaSymbol }}</UKbd>
-    <UKbd>K</UKbd>
-  </div>
-</template>
-```
-::
+:component-example{component="kbd-example"}
 
 ### Size
 
diff --git a/docs/content/3.forms/1.input.md b/docs/content/3.forms/1.input.md
index 5a5a9d15..4bdb9114 100644
--- a/docs/content/3.forms/1.input.md
+++ b/docs/content/3.forms/1.input.md
@@ -10,21 +10,7 @@ links:
 
 Use a `v-model` to make the Input reactive.
 
-::component-example
-#default
-:input-example
-
-#code
-```vue
-<script setup>
-const value = ref('')
-</script>
-
-<template>
-  <UInput v-model="value" />
-</template>
-```
-::
+:component-example{component="input-example"}
 
 ### Style
 
@@ -119,8 +105,8 @@ options:
   - name: color
     restriction: included
     values:
-      - white   
-      - gray      
+      - white
+      - gray
 excludedProps:
   - icon
 ---
@@ -197,32 +183,7 @@ baseProps:
 
 You can for example create a clearable Input by injecting a [Button](/elements/button) in the `trailing` slot that displays when some text is entered.
 
-::component-example
-#default
-:input-example-clearable
-
-#code
-```vue
-<template>
-  <UInput v-model="q" name="q" placeholder="Search..." icon="i-heroicons-magnifying-glass-20-solid" :ui="{ icon: { trailing: { pointer: '' } } }">
-    <template #trailing>
-      <UButton
-        v-show="q !== ''"
-        color="gray"
-        variant="link"
-        icon="i-heroicons-x-mark-20-solid"
-        :padded="false"
-        @click="q = ''"
-      />
-    </template>
-  </UInput>
-</template>
-
-<script setup lang="ts">
-const q = ref('')
-</script>
-```
-::
+:component-example{component="input-example-clearable"}
 
 ::callout{icon="i-heroicons-exclamation-triangle-20-solid"}
 As leading and trailing icons are wrapped around a `pointer-events-none` class, if you inject a clickable element in the slot, you need to remove this class to make it clickable by adding `:ui="{ icon: { trailing: { pointer: '' } } }"` to the Input.
diff --git a/docs/content/3.forms/10.form.md b/docs/content/3.forms/10.form.md
index d204b957..32e259c7 100644
--- a/docs/content/3.forms/10.form.md
+++ b/docs/content/3.forms/10.form.md
@@ -17,54 +17,7 @@ The Form component requires the `validate` and `state` props for form validation
   - `message` - the error message to display.
   - `path` - the path to the form element matching the `name`.
 
-::component-example
-#default
-:form-example-basic{class="space-y-4 w-60"}
-
-#code
-```vue
-<script setup lang="ts">
-import type { FormError, FormSubmitEvent } from '@nuxt/ui/dist/runtime/types'
-
-const state = reactive({
-  email: undefined,
-  password: undefined
-})
-
-const validate = (state: any): FormError[] => {
-  const errors = []
-  if (!state.email) errors.push({ path: 'email', message: 'Required' })
-  if (!state.password) errors.push({ path: 'password', message: 'Required' })
-  return errors
-}
-
-async function submit (event: FormSubmitEvent<any>) {
-  // Do something with data
-  console.log(event.data)
-}
-</script>
-
-<template>
-  <UForm
-    :validate="validate"
-    :state="state"
-    @submit="submit"
-  >
-    <UFormGroup label="Email" name="email">
-      <UInput v-model="state.email" />
-    </UFormGroup>
-
-    <UFormGroup label="Password" name="password">
-      <UInput v-model="state.password" type="password" />
-    </UFormGroup>
-
-    <UButton type="submit">
-      Submit
-    </UButton>
-  </UForm>
-</template>
-```
-::
+:component-example{component="form-example-basic" :componentProps='{"class": "space-y-4 w-60"}'}
 
 ## Schema
 
@@ -72,213 +25,20 @@ You can provide a schema from [Yup](#yup), [Zod](#zod) or [Joi](#joi), [Valibot]
 
 ### Yup
 
-::component-example
-#default
-:form-example-yup{class="space-y-4 w-60"}
-
-#code
-```vue
-<script setup lang="ts">
-import { object, string, InferType } from 'yup'
-import type { FormSubmitEvent } from '@nuxt/ui/dist/runtime/types'
-
-const schema = object({
-  email: string().email('Invalid email').required('Required'),
-  password: string()
-    .min(8, 'Must be at least 8 characters')
-    .required('Required')
-})
-
-type Schema = InferType<typeof schema>
-
-const state = reactive({
-  email: undefined,
-  password: undefined
-})
-
-async function submit (event: FormSubmitEvent<Schema>) {
-  // Do something with event.data
-  console.log(event.data)
-}
-</script>
-
-<template>
-  <UForm
-    :schema="schema"
-    :state="state"
-    @submit="submit"
-  >
-    <UFormGroup label="Email" name="email">
-      <UInput v-model="state.email" />
-    </UFormGroup>
-
-    <UFormGroup label="Password" name="password">
-      <UInput v-model="state.password" type="password" />
-    </UFormGroup>
-
-    <UButton type="submit">
-      Submit
-    </UButton>
-  </UForm>
-</template>
-```
-::
+:component-example{component="form-example-yup" :componentProps='{"class": "space-y-4 w-60"}'}
 
 ### Zod
 
-::component-example
-#default
-:form-example-zod{class="space-y-4 w-60"}
-
-#code
-```vue
-<script setup lang="ts">
-import { z } from 'zod'
-import type { FormSubmitEvent } from '@nuxt/ui/dist/runtime/types'
-
-const schema = z.object({
-  email: z.string().email('Invalid email'),
-  password: z.string().min(8, 'Must be at least 8 characters')
-})
-
-type Schema = z.output<typeof schema>
-
-const state = reactive({
-  email: undefined,
-  password: undefined
-})
-
-async function submit (event: FormSubmitEvent<Schema>) {
-  // Do something with data
-  console.log(event.data)
-}
-</script>
-
-<template>
-  <UForm
-    :schema="schema"
-    :state="state"
-    @submit="submit"
-  >
-    <UFormGroup label="Email" name="email">
-      <UInput v-model="state.email" />
-    </UFormGroup>
-
-    <UFormGroup label="Password" name="password">
-      <UInput v-model="state.password" type="password" />
-    </UFormGroup>
-
-    <UButton type="submit">
-      Submit
-    </UButton>
-  </UForm>
-</template>
-```
-::
+:component-example{component="form-example-zod" :componentProps='{"class": "space-y-4 w-60"}'}
 
 ### Joi
 
-::component-example
-#default
-:form-example-joi{class="space-y-4 w-60"}
+:component-example{component="form-example-joi" :componentProps='{"class": "space-y-4 w-60"}'}
 
-#code
-```vue
-<script setup lang="ts">
-import Joi from 'joi'
-import type { FormSubmitEvent } from '@nuxt/ui/dist/runtime/types'
-
-const schema = Joi.object({
-  email: Joi.string().required(),
-  password: Joi.string()
-    .min(8)
-    .required()
-})
-
-const state = reactive({
-  email: undefined,
-  password: undefined
-})
-
-async function submit (event: FormSubmitEvent<any>) {
-  // Do something with event.data
-  console.log(event.data)
-}
-</script>
-
-<template>
-  <UForm
-    :schema="schema"
-    :state="state"
-    @submit="submit"
-  >
-    <UFormGroup label="Email" name="email">
-      <UInput v-model="state.email" />
-    </UFormGroup>
-
-    <UFormGroup label="Password" name="password">
-      <UInput v-model="state.password" type="password" />
-    </UFormGroup>
-
-    <UButton type="submit">
-      Submit
-    </UButton>
-  </UForm>
-</template>
-```
-::
 
 ### Valibot
 
-::component-example
-#default
-:form-example-valibot{class="space-y-4 w-60"}
-
-#code
-```vue
-<script setup lang="ts">
-import { string, object, email, minLength, Input } from 'valibot'
-import type { FormSubmitEvent } from '@nuxt/ui/dist/runtime/types'
-
-const schema = object({
-  email: string([email('Invalid email')]),
-  password: string([minLength(8, 'Must be at least 8 characters')])
-})
-
-type Schema = Input<typeof schema>
-
-const state = reactive({
-  email: undefined,
-  password: undefined
-})
-
-async function submit (event: FormSubmitEvent<Schema>) {
-  // Do something with event.data
-  console.log(event.data)
-}
-</script>
-
-<template>
-  <UForm
-    :schema="schema"
-    :state="state"
-    @submit="submit"
-  >
-    <UFormGroup label="Email" name="email">
-      <UInput v-model="state.email" />
-    </UFormGroup>
-
-    <UFormGroup label="Password" name="password">
-      <UInput v-model="state.password" type="password" />
-    </UFormGroup>
-
-    <UButton type="submit">
-      Submit
-    </UButton>
-  </UForm>
-</template>
-```
-::
+:component-example{component="form-example-valibot" :componentProps='{"class": "space-y-4 w-60"}'}
 
 ## Other libraries
 
@@ -372,10 +132,7 @@ async function submit (event: FormSubmitEvent<any>) {
 
 The Form component automatically triggers validation upon `submit`, `input`, `blur` or `change` events. This ensures that any errors are displayed as soon as the user interacts with the form elements. You can control when validation happens this using the `validate-on` prop.
 
-::component-example
-#default
-:form-example-elements{class="space-y-4 w-60"}
-::
+:component-example{component="form-example-elements" :componentProps='{"class": "space-y-4 w-60"}' hiddenCode }
 
 ::callout{icon="i-simple-icons-github" to="https://github.com/nuxt/ui/blob/dev/docs/components/content/examples/FormExampleElements.vue"}
 Take a look at the component!
diff --git a/docs/content/3.forms/2.textarea.md b/docs/content/3.forms/2.textarea.md
index 0b49f78e..b03a8210 100644
--- a/docs/content/3.forms/2.textarea.md
+++ b/docs/content/3.forms/2.textarea.md
@@ -10,21 +10,7 @@ links:
 
 Use a `v-model` to make the Textarea reactive.
 
-::component-example
-#default
-:textarea-example
-
-#code
-```vue
-<script setup>
-const value = ref('')
-</script>
-
-<template>
-  <UTextarea v-model="value" />
-</template>
-```
-::
+:component-example{component="textarea-example"}
 
 ### Style
 
diff --git a/docs/content/3.forms/3.select.md b/docs/content/3.forms/3.select.md
index 03181cd3..2b85a39a 100644
--- a/docs/content/3.forms/3.select.md
+++ b/docs/content/3.forms/3.select.md
@@ -12,55 +12,13 @@ The Select component is a wrapper around the native `<select>` HTML element. For
 
 Use a `v-model` to make the Select reactive alongside the `options` prop to pass an array of strings or objects.
 
-::component-example
-#default
-:select-example
-
-#code
-```vue
-<script setup>
-const countries = ['United States', 'Canada', 'Mexico']
-
-const country = ref(countries[0])
-</script>
-
-<template>
-  <USelect v-model="country" :options="countries" />
-</template>
-```
-::
+:component-example{component="select-example"}
 
 When using objects, you can configure which field will be used for display through the `option-attribute` prop that defaults to `label` and which field will be used for comparison through the `value-attribute` prop that defaults to `value`.
 
 Adding a `disabled` key to the objects will control the disabled state of the option.
 
-::component-example
-#default
-:select-example-objects
-
-#code
-```vue
-<script setup>
-const countries = [{
-  name: 'United States',
-  value: 'US'
-}, {
-  name: 'Canada',
-  value: 'CA',
-  disabled: true
-}, {
-  name: 'Mexico',
-  value: 'MX'
-}]
-
-const country = ref('CA')
-</script>
-
-<template>
-  <USelect v-model="country" :options="countries" option-attribute="name" />
-</template>
-```
-::
+:component-example{component="select-example-objects"}
 
 ### Style
 
@@ -176,7 +134,7 @@ options:
     restriction: included
     values:
       - white
-      - gray   
+      - gray
 excludedProps:
   - icon
 ---
diff --git a/docs/content/3.forms/4.select-menu.md b/docs/content/3.forms/4.select-menu.md
index 6e34d797..cd7c67f6 100644
--- a/docs/content/3.forms/4.select-menu.md
+++ b/docs/content/3.forms/4.select-menu.md
@@ -16,142 +16,23 @@ The `SelectMenu` component renders by default a [Select](/forms/select) componen
 
 Like the `Select` component, you can use the `options` prop to pass an array of strings or objects.
 
-::component-example
-#default
-:select-menu-example-basic{class="w-full lg:w-40"}
-
-#code
-```vue
-<script setup>
-const people = ['Wade Cooper', 'Arlene Mccoy', 'Devon Webb', 'Tom Cook', 'Tanya Fox', 'Hellen Schmidt', 'Caroline Schultz', 'Mason Heaney', 'Claudie Smitham', 'Emil Schaefer']
-
-const selected = ref(people[0])
-</script>
-
-<template>
-  <USelectMenu v-model="selected" :options="people" />
-</template>
-```
-::
+:component-example{component="select-menu-example-basic" :componentProps='{"class": "w-full lg:w-40"}'}
 
 ### Multiple
 
 You can use the `multiple` prop to select multiple values.
 
-::component-example
-#default
-:select-menu-example-multiple{class="w-full lg:w-40"}
-
-#code
-```vue
-<script setup>
-const people = [...]
-
-const selected = ref([])
-</script>
-
-<template>
-  <USelectMenu v-model="selected" :options="people" multiple placeholder="Select people" />
-</template>
-```
-::
+:component-example{component="select-menu-example-multiple" :componentProps='{"class": "w-full lg:w-40"}'}
 
 ### Objects
 
 You can pass an array of objects to `options` and either compare on the whole object or use the `by` prop to compare on a specific key. You can configure which field will be used to display the label through the `option-attribute` prop that defaults to `label`.
 
-::component-example
-#default
-:select-menu-example-objects{class="w-full lg:w-40"}
-#code
-```vue
-<script setup>
-const people = [{
-  id: 'benjamincanac',
-  label: 'benjamincanac',
-  href: 'https://github.com/benjamincanac',
-  target: '_blank',
-  avatar: { src: 'https://avatars.githubusercontent.com/u/739984?v=4' }
-},
-{
-  id: 'Atinux',
-  label: 'Atinux',
-  href: 'https://github.com/Atinux',
-  target: '_blank',
-  avatar: { src: 'https://avatars.githubusercontent.com/u/904724?v=4' }
-},
-{
-  id: 'smarroufin',
-  label: 'smarroufin',
-  href: 'https://github.com/smarroufin',
-  target: '_blank',
-  avatar: { src: 'https://avatars.githubusercontent.com/u/7547335?v=4' }
-},
-{
-  id: 'nobody',
-  label: 'Nobody',
-  icon: 'i-heroicons-user-circle'
-}]
-
-const selected = ref(people[0])
-</script>
-
-<template>
-  <USelectMenu v-model="selected" :options="people">
-    <template #label>
-      <UIcon v-if="selected.icon" :name="selected.icon" class="w-4 h-4" />
-      <UAvatar v-else-if="selected.avatar" v-bind="selected.avatar" size="3xs" />
-
-      {{ selected.label }}
-    </template>
-  </USelectMenu>
-</template>
-```
-::
+:component-example{component="select-menu-example-objects" :componentProps='{"class": "w-full lg:w-40"}'}
 
 If you only want to select a single object property rather than the whole object as value, you can set the `value-attribute` property. This prop defaults to `null`.
 
-::component-example
-#default
-:select-menu-example-objects-value-attribute{class="w-full lg:w-40"}
-
-#code
-```vue
-<script setup>
-const people = [{
-  id: 1,
-  name: 'Wade Cooper'
-}, {
-  id: 2,
-  name: 'Arlene Mccoy'
-}, {
-  id: 3,
-  name: 'Devon Webb'
-}, {
-  id: 4,
-  name: 'Tom Cook'
-}]
-
-const selected = ref(people[0].id)
-
-const current = computed(() => people.find(person => person.id === selected.value))
-</script>
-
-<template>
-  <USelectMenu
-    v-model="selected"
-    :options="people"
-    placeholder="Select people"
-    value-attribute="id"
-    option-attribute="name"
-  >
-    <template #label>
-      {{ current.name }}
-    </template>
-  </USelectMenu>
-</template>
-```
-::
+:component-example{component="select-menu-example-objects-value-attribute" :componentProps='{"class": "w-full lg:w-40"}'}
 
 ### Icon
 
@@ -200,33 +81,7 @@ Pass a function to the `searchable` prop to customize the search behavior and fi
 
 Use the `debounce` prop to adjust the delay of the function.
 
-::component-example
-#default
-:select-menu-example-async-search{class="w-full lg:w-40"}
-
-#code
-```vue
-<script setup>
-const search = async (q) => {
-  const users = await $fetch('https://jsonplaceholder.typicode.com/users', { params: { q } })
-
-  return users.map(user => ({ id: user.id, label: user.name, suffix: user.email })).filter(Boolean)
-}
-
-const selected = ref([])
-</script>
-
-<template>
-  <USelectMenu
-    v-model="selected"
-    :searchable="search"
-    placeholder="Search for a user..."
-    multiple
-    by="id"
-  />
-</template>
-```
-::
+:component-example{component="select-menu-example-async-search" :componentProps='{"class": "w-full lg:w-40"}'}
 
 ### Create option
 
@@ -234,99 +89,7 @@ Use the `creatable` prop to enable the creation of new options when the search d
 
 Try to search for something that doesn't exist in the example below.
 
-::component-example
-#default
-:select-menu-example-creatable{class="w-full lg:w-40"}
-
-#code
-```vue
-<script setup>
-const options = ref([
-  { id: 1, name: 'bug', color: 'd73a4a' },
-  { id: 2, name: 'documentation', color: '0075ca' },
-  { id: 3, name: 'duplicate', color: 'cfd3d7' },
-  { id: 4, name: 'enhancement', color: 'a2eeef' },
-  { id: 5, name: 'good first issue', color: '7057ff' },
-  { id: 6, name: 'help wanted', color: '008672' },
-  { id: 7, name: 'invalid', color: 'e4e669' },
-  { id: 8, name: 'question', color: 'd876e3' },
-  { id: 9, name: 'wontfix', color: 'ffffff' }
-])
-
-const selected = ref([])
-
-const labels = computed({
-  get: () => selected.value,
-  set: async (labels) => {
-    const promises = labels.map(async (label) => {
-      if (label.id) {
-        return label
-      }
-
-      // In a real app, you would make an API call to create the label
-      const response = {
-        name: label.name,
-        color: generateColorFromString(label.name)
-      }
-
-      options.value.push(response)
-
-      return response
-    })
-
-    selected.value = await Promise.all(promises)
-  }
-})
-
-// Look at the component example to see how this is used
-function generateColorFromString (str) {
-  // ...
-}
-</script>
-
-<template>
-  <USelectMenu
-    v-model="labels"
-    by="id"
-    name="labels"
-    :options="options"
-    option-attribute="name"
-    multiple
-    searchable
-    creatable
-  >
-    <template #label>
-      <template v-if="labels.length">
-        <span class="flex items-center -space-x-1">
-          <span v-for="label of labels" :key="label.id" class="flex-shrink-0 w-2 h-2 mt-px rounded-full" :style="{ background: `#${label.color}` }" />
-        </span>
-        <span>{{ labels.length }} label{{ labels.length > 1 ? 's' : '' }}</span>
-      </template>
-      <template v-else>
-        <span class="text-gray-500 dark:text-gray-400 truncate">Select labels</span>
-      </template>
-    </template>
-
-    <template #option="{ option }">
-      <span
-        class="flex-shrink-0 w-2 h-2 mt-px rounded-full"
-        :style="{ background: `#${option.color}` }"
-      />
-      <span class="truncate">{{ option.name }}</span>
-    </template>
-
-    <template #option-create="{ option }">
-      <span class="flex-shrink-0">New label:</span>
-      <span
-        class="flex-shrink-0 w-2 h-2 mt-px rounded-full -mx-1"
-        :style="{ background: `#${generateColorFromString(option.name)}` }"
-      />
-      <span class="block truncate">{{ option.name }}</span>
-    </template>
-  </USelectMenu>
-</template>
-```
-::
+:component-example{component="select-menu-example-creatable" :componentProps='{"class": "w-full lg:w-40"}'}
 
 ## Slots
 
@@ -334,125 +97,25 @@ function generateColorFromString (str) {
 
 You can override the `#label` slot and handle the display yourself.
 
-::component-example
-#default
-:select-menu-example-multiple-slot{class="w-full lg:w-40"}
-
-#code
-```vue
-<script setup>
-const people = [...]
-
-const selected = ref([])
-</script>
-
-<template>
-  <USelectMenu v-model="selected" :options="people" multiple>
-    <template #label>
-      <span v-if="selected.length" class="truncate">{{ selected.join(', ') }}</span>
-      <span v-else>Select people</span>
-    </template>
-  </USelectMenu>
-</template>
-```
-::
+:component-example{component="select-menu-example-multiple-slot" :componentProps='{"class": "w-full lg:w-40"}'}
 
 ### `default`
 
 You can also override the `#default` slot entirely.
 
-::component-example
-#default
-:select-menu-example-button{class="w-full lg:w-40"}
-
-#code
-```vue
-<script setup>
-const people = [...]
-
-const selected = ref(people[3])
-</script>
-
-<template>
-  <USelectMenu v-slot="{ open }" v-model="selected" :options="people">
-    <UButton color="gray" class="flex-1 justify-between">
-      {{ selected }}
-
-      <UIcon name="i-heroicons-chevron-right-20-solid" class="w-5 h-5 transition-transform" :class="[open && 'transform rotate-90']" />
-    </UButton>
-  </USelectMenu>
-</template>
-```
-::
+:component-example{component="select-menu-example-button" :componentProps='{"class": "w-full lg:w-40"}'}
 
 ### `option`
 
 Use the `#option` slot to customize the option content. You will have access to the `option`, `active` and `selected` properties in the slot scope.
 
-::component-example
-#default
-:select-menu-example-option-slot{class="w-full lg:w-40"}
-
-#code
-```vue
-<script setup>
-const people = [
-  { name: 'Wade Cooper', online: true },
-  { name: 'Arlene Mccoy', online: false },
-  { name: 'Devon Webb', online: false },
-  { name: 'Tom Cook', online: true },
-  { name: 'Tanya Fox', online: false },
-  { name: 'Hellen Schmidt', online: true },
-  { name: 'Caroline Schultz', online: true },
-  { name: 'Mason Heaney', online: false },
-  { name: 'Claudie Smitham', online: true },
-  { name: 'Emil Schaefer', online: false }
-]
-
-const selected = ref(people[3])
-</script>
-
-<template>
-  <USelectMenu v-model="selected" :options="people" option-attribute="name">
-    <template #label>
-      <span :class="[selected.online ? 'bg-green-400' : 'bg-gray-200', 'inline-block h-2 w-2 flex-shrink-0 rounded-full']" aria-hidden="true" />
-      <span class="truncate">{{ selected.name }}</span>
-    </template>
-
-    <template #option="{ option: person }">
-      <span :class="[person.online ? 'bg-green-400' : 'bg-gray-200', 'inline-block h-2 w-2 flex-shrink-0 rounded-full']" aria-hidden="true" />
-      <span class="truncate">{{ person.name }}</span>
-    </template>
-  </USelectMenu>
-</template>
-```
-::
+:component-example{component="select-menu-example-option-slot" :componentProps='{"class": "w-full lg:w-40"}'}
 
 ### `option-empty`
 
 Use the `#option-empty` slot to customize the content displayed when the `searchable` prop is `true` and there is no options. You will have access to the `query` property in the slot scope.
 
-::component-example
-#default
-:select-menu-example-option-empty-slot{class="w-full lg:w-40"}
-
-#code
-```vue
-<script setup>
-const people = ['Wade Cooper', 'Arlene Mccoy', 'Devon Webb', 'Tom Cook', 'Tanya Fox', 'Hellen Schmidt', 'Caroline Schultz', 'Mason Heaney', 'Claudie Smitham', 'Emil Schaefer']
-
-const selected = ref(people[0])
-</script>
-
-<template>
-  <USelectMenu v-model="selected" :options="people" searchable>
-    <template #option-empty="{ query }">
-      <q>{{ query }}</q> not found
-    </template>
-  </USelectMenu>
-</template>
-```
-::
+:component-example{component="select-menu-example-option-empty-slot" :componentProps='{"class": "w-full lg:w-40"}'}
 
 ### `option-create`
 
diff --git a/docs/content/3.forms/5.checkbox.md b/docs/content/3.forms/5.checkbox.md
index d699bdb3..6d67949c 100644
--- a/docs/content/3.forms/5.checkbox.md
+++ b/docs/content/3.forms/5.checkbox.md
@@ -10,21 +10,7 @@ links:
 
 Use a `v-model` to make the Checkbox reactive.
 
-::component-example
-#default
-:checkbox-example
-
-#code
-```vue
-<script setup>
-const selected = ref(true)
-</script>
-
-<template>
-  <UCheckbox v-model="selected" name="notifications" label="Notifications" />
-</template>
-```
-::
+:component-example{component="checkbox-example"}
 
 ### Label
 
diff --git a/docs/content/3.forms/6.radio.md b/docs/content/3.forms/6.radio.md
index e4d8f206..62311706 100644
--- a/docs/content/3.forms/6.radio.md
+++ b/docs/content/3.forms/6.radio.md
@@ -10,35 +10,7 @@ links:
 
 Use a `v-model` to make the Radio reactive.
 
-::component-example
-#default
-:radio-example
-
-#code
-```vue
-<script setup>
-const methods = [{
-  name: 'email',
-  value: 'email',
-  label: 'Email'
-}, {
-  name: 'sms',
-  value: 'sms',
-  label: 'Phone (SMS)'
-}, {
-  name: 'push',
-  value: 'push',
-  label: 'Push notification'
-}]
-
-const selected = ref('sms')
-</script>
-
-<template>
-  <URadio v-for="method of methods" :key="method.name" v-model="selected" v-bind="method" />
-</template>
-```
-::
+:component-example{component="radio-example"}
 
 ### Label
 
diff --git a/docs/content/3.forms/7.toggle.md b/docs/content/3.forms/7.toggle.md
index 25563a8c..d1c98963 100644
--- a/docs/content/3.forms/7.toggle.md
+++ b/docs/content/3.forms/7.toggle.md
@@ -13,21 +13,7 @@ links:
 
 Use a `v-model` to make the Toggle reactive.
 
-::component-example
-#default
-:toggle-example
 
-#code
-```vue
-<script setup>
-const selected = ref(false)
-</script>
-
-<template>
-  <UToggle v-model="selected" />
-</template>
-```
-::
 
 ### Style
 
diff --git a/docs/content/3.forms/8.range.md b/docs/content/3.forms/8.range.md
index c984f32d..126a8f35 100644
--- a/docs/content/3.forms/8.range.md
+++ b/docs/content/3.forms/8.range.md
@@ -10,21 +10,7 @@ links:
 
 Use a `v-model` to make the Range reactive.
 
-::component-example
-#default
-:range-example
-
-#code
-```vue
-<script setup>
-const value = ref(50)
-</script>
-
-<template>
-  <URange v-model="value" />
-</template>
-```
-::
+:component-example{component="range-example"}
 
 ### Style
 
diff --git a/docs/content/3.forms/9.form-group.md b/docs/content/3.forms/9.form-group.md
index 15b02a82..398c549b 100644
--- a/docs/content/3.forms/9.form-group.md
+++ b/docs/content/3.forms/9.form-group.md
@@ -112,23 +112,7 @@ Use the `error` prop to display an error message below the form element.
 
 When used together with the `help` prop, the `error` prop will take precedence.
 
-::component-example
-#default
-:form-group-error-example
-
-#code
-```vue
-<template>
-  <UFormGroup v-slot="{ error }" label="Email" :error="!email && 'You must enter an email'" help="This is a nice email!">
-    <UInput v-model="email" type="email" placeholder="Enter email" :trailing-icon="error && 'i-heroicons-exclamation-triangle-20-solid'" />
-  </UFormGroup>
-</template>
-
-<script setup lang="ts">
-const email = ref('')
-</script>
-```
-::
+:component-example{component="form-group-error-example"}
 
 ::callout{icon="i-heroicons-light-bulb"}
   The `error` prop will automatically set the `color` prop of the form element to `red`.
@@ -274,30 +258,7 @@ props:
 
 Use the `#error` slot to set the custom content for error.
 
-::component-example
-#default
-:form-group-error-slot-example{class="w-60"}
-
-#code
-```vue
-<template>
-  <UFormGroup label="Email" :error="!email && 'You must enter an email'" help="This is a nice email!">
-    <template #default="{ error }">
-      <UInput v-model="email" type="email" placeholder="Enter email" :trailing-icon="error ? 'i-heroicons-exclamation-triangle-20-solid' : undefined" />
-    </template>
-
-    <template #error="{ error }">
-      <UAlert v-if="error" icon="i-heroicons-exclamation-triangle-20-solid" :title="error" color="red" />
-      <UAlert v-else icon="i-heroicons-check-circle-20-solid" title="Your email is valid" color="green" />
-    </template>
-  </UFormGroup>
-</template>
-
-<script setup lang="ts">
-const email = ref('')
-</script>
-```
-::
+:component-example{component="form-group-error-slot-example" :componentProps='{"class": "w-60"}'}
 
 ## Props
 
diff --git a/docs/content/4.data/1.table.md b/docs/content/4.data/1.table.md
index cb2f369d..1c37952c 100644
--- a/docs/content/4.data/1.table.md
+++ b/docs/content/4.data/1.table.md
@@ -14,57 +14,10 @@ Use the `rows` prop to set the data to display in the table. By default, the tab
 ---
 padding: false
 overflowClass: 'overflow-x-auto'
+component: 'table-example-basic'
+componentProps:
+  class: 'flex-1'
 ---
-
-#default
-:table-example-basic{class="flex-1"}
-
-#code
-```vue
-<script setup>
-const people = [{
-  id: 1,
-  name: 'Lindsay Walton',
-  title: 'Front-end Developer',
-  email: 'lindsay.walton@example.com',
-  role: 'Member'
-}, {
-  id: 2,
-  name: 'Courtney Henry',
-  title: 'Designer',
-  email: 'courtney.henry@example.com',
-  role: 'Admin'
-}, {
-  id: 3,
-  name: 'Tom Cook',
-  title: 'Director of Product',
-  email: 'tom.cook@example.com',
-  role: 'Member'
-}, {
-  id: 4,
-  name: 'Whitney Francis',
-  title: 'Copywriter',
-  email: 'whitney.francis@example.com',
-  role: 'Admin'
-}, {
-  id: 5,
-  name: 'Leonard Krasner',
-  title: 'Senior Designer',
-  email: 'leonard.krasner@example.com',
-  role: 'Owner'
-}, {
-  id: 6,
-  name: 'Floyd Miles',
-  title: 'Principal Designer',
-  email: 'floyd.miles@example.com',
-  role: 'Member'
-}]
-</script>
-
-<template>
-  <UTable :rows="people" />
-</template>
-```
 ::
 
 ### Columns
@@ -81,37 +34,10 @@ Use the `columns` prop to configure which columns to display. It's an array of o
 ---
 padding: false
 overflowClass: 'overflow-x-auto'
+component: 'table-example-columns'
+componentProps:
+  class: 'flex-1'
 ---
-
-#default
-:table-example-columns{class="flex-1"}
-
-#code
-```vue
-<script setup>
-const columns = [{
-  key: 'id',
-  label: 'ID'
-}, {
-  key: 'name',
-  label: 'User name'
-}, {
-  key: 'title',
-  label: 'Job position'
-}, {
-  key: 'email',
-  label: 'Email'
-}, {
-  key: 'role'
-}]
-
-const people = [...]
-</script>
-
-<template>
-  <UTable :columns="columns" :rows="people" />
-</template>
-```
 ::
 
 You can easily use the [SelectMenu](/forms/select-menu) component to change the columns to display.
@@ -120,44 +46,10 @@ You can easily use the [SelectMenu](/forms/select-menu) component to change the
 ---
 padding: false
 overflowClass: 'overflow-x-auto'
+component: 'table-example-columns-selectable'
+componentProps:
+  class: 'flex-1'
 ---
-
-#default
-:table-example-columns-selectable{class="flex-1"}
-
-#code
-```vue
-<script setup>
-const columns = [{
-  key: 'id',
-  label: 'ID'
-}, {
-  key: 'name',
-  label: 'Name'
-}, {
-  key: 'title',
-  label: 'Title'
-}, {
-  key: 'email',
-  label: 'Email'
-}, {
-  key: 'role',
-  label: 'Role'
-}]
-
-const selectedColumns = ref([...columns])
-
-const people = [...]
-</script>
-
-<template>
-  <div>
-    <USelectMenu v-model="selectedColumns" :options="columns" multiple placeholder="Columns" />
-
-    <UTable :columns="selectedColumns" :rows="people" />
-  </div>
-</template>
-```
 ::
 
 ### Sortable
@@ -168,42 +60,10 @@ You can make the columns sortable by setting the `sortable` property to `true` i
 ---
 padding: false
 overflowClass: 'overflow-x-auto'
+component: 'table-example-columns-sortable'
+componentProps:
+  class: 'flex-1'
 ---
-
-#default
-:table-example-columns-sortable{class="flex-1"}
-
-#code
-```vue
-<script setup>
-const columns = [{
-  key: 'id',
-  label: 'ID'
-}, {
-  key: 'name',
-  label: 'Name',
-  sortable: true
-}, {
-  key: 'title',
-  label: 'Title',
-  sortable: true
-}, {
-  key: 'email',
-  label: 'Email',
-  sortable: true,
-  direction: 'desc'
-}, {
-  key: 'role',
-  label: 'Role'
-}]
-
-const people = [...]
-</script>
-
-<template>
-  <UTable :columns="columns" :rows="people" :sort="{ column: 'title' }" />
-</template>
-```
 ::
 
 You can specify the default direction of each column through the `direction` property. It can be either `asc` or `desc` and defaults to `asc`.
@@ -304,23 +164,10 @@ Use a `v-model` to make the table selectable. The `v-model` will be an array of
 ---
 padding: false
 overflowClass: 'overflow-x-auto'
+component: 'table-example-selectable'
+componentProps:
+  class: 'flex-1'
 ---
-
-#default
-:table-example-selectable{class="flex-1"}
-
-#code
-```vue
-<script setup>
-const people = [...]
-
-const selected = ref([people[1]])
-</script>
-
-<template>
-  <UTable v-model="selected" :rows="people" />
-</template>
-```
 ::
 
 ::callout{icon="i-heroicons-light-bulb"}
@@ -335,32 +182,10 @@ You can use this to navigate to a page, open a modal or even to select the row m
 ---
 padding: false
 overflowClass: 'overflow-x-auto'
+component: 'table-example-clickable'
+componentProps:
+  class: 'flex-1'
 ---
-
-#default
-:table-example-clickable{class="flex-1"}
-
-#code
-```vue
-<script setup>
-const people = [...]
-
-function select (row) {
-  const index = selected.value.findIndex((item) => item.id === row.id)
-  if (index === -1) {
-    selected.value.push(row)
-  } else {
-    selected.value.splice(index, 1)
-  }
-}
-
-const selected = ref([people[1]])
-</script>
-
-<template>
-  <UTable v-model="selected" :rows="people" @select="select" />
-</template>
-```
 ::
 
 ### Searchable
@@ -371,74 +196,24 @@ You can easily use the [Input](/forms/input) component to filter the rows.
 ---
 padding: false
 overflowClass: 'overflow-x-auto'
+component: 'table-example-searchable'
+componentProps:
+  class: 'flex-1'
 ---
-
-#default
-:table-example-searchable{class="flex-1"}
-
-#code
-```vue
-<script setup>
-const people = [...]
-
-const q = ref('')
-
-const filteredRows = computed(() => {
-  if (!q.value) {
-    return people
-  }
-
-  return people.filter((person) => {
-    return Object.values(person).some((value) => {
-      return String(value).toLowerCase().includes(q.value.toLowerCase())
-    })
-  })
-})
-</script>
-
-<template>
-  <div>
-    <UInput v-model="q" placeholder="Filter people..." />
-
-    <UTable :rows="filteredRows" />
-  </div>
-</template>
-```
 ::
 
 ### Paginable
 
 You can easily use the [Pagination](/navigation/pagination) component to paginate the rows.
 
-::component-example
+::component-example{class="grid"}
 ---
 padding: false
+overflowClass: 'overflow-x-auto'
+component: 'table-example-paginable'
+componentProps:
+  class: 'flex-1'
 ---
-
-#default
-:table-example-paginable{class="w-full"}
-
-#code
-```vue
-<script setup>
-const people = [...]
-
-const page = ref(1)
-const pageCount = 5
-
-const rows = computed(() => {
-  return people.slice((page.value - 1) * pageCount, (page.value) * pageCount)
-})
-</script>
-
-<template>
-  <div>
-    <UTable :rows="rows" />
-
-    <UPagination v-model="page" :page-count="pageCount" :total="people.length" />
-  </div>
-</template>
-```
 ::
 
 ### Loading
@@ -530,57 +305,13 @@ You can apply styles to `tr` and `td` elements by passing a `class` to rows.
 
 Also, you can apply styles to `th` elements by passing a `class` to columns.
 
-::component-example
+::component-example{class="grid"}
 ---
 padding: false
+component: 'table-example-style'
+componentProps:
+  class: 'w-full'
 ---
-
-#default
-:table-example-style{class="w-full"}
-
-#code
-```vue
-<script setup>
-const columns = [{
-  key: 'id',
-  label: '#'
-}, {
-  key: 'quantity',
-  label: 'Quantity',
-  class: 'italic' // Apply style to column header
-}, {
-  key: 'name',
-  label: 'Name'
-}]
-
-const items = [{
-  id: 1,
-  name: 'Apple',
-  quantity: { value: 100, class: 'bg-green-500/50 dark:bg-green-400/50' } // Apply style to td
-}, {
-  id: 2,
-  name: 'Orange',
-  quantity: { value: 0 },
-  class: 'bg-red-500/50 dark:bg-red-400/50 animate-pulse' // Apply style to tr
-}, {
-  id: 3,
-  name: 'Banana',
-  quantity: { value: 30, class: 'bg-green-500/50 dark:bg-green-400/50' }
-}, {
-  id: 4,
-  name: 'Mango',
-  quantity: { value: 5, class: 'bg-green-500/50 dark:bg-green-400/50' }
-}]
-</script>
-
-<template>
-  <UTable :rows="items" :columns="columns">
-    <template #quantity-data="{ row }">
-      {{ row.quantity.value }}
-    </template>
-  </UTable>
-</template>
-```
 ::
 
 ## Slots
@@ -612,57 +343,10 @@ You can for example create an extra column for actions with a [Dropdown](/elemen
 ---
 padding: false
 overflowClass: 'overflow-x-auto'
+component: 'table-example-slots'
+componentProps:
+  class: 'flex-1'
 ---
-
-#default
-:table-example-slots{class="flex-1"}
-
-#code
-```vue
-<script setup>
-const columns = [..., {
-  key: 'actions'
-}]
-
-const people = [...]
-
-const items = (row) => [
-  [{
-    label: 'Edit',
-    icon: 'i-heroicons-pencil-square-20-solid',
-    click: () => console.log('Edit', row.id)
-  }, {
-    label: 'Duplicate',
-    icon: 'i-heroicons-document-duplicate-20-solid'
-  }], [{
-    label: 'Archive',
-    icon: 'i-heroicons-archive-box-20-solid'
-  }, {
-    label: 'Move',
-    icon: 'i-heroicons-arrow-right-circle-20-solid'
-  }], [{
-    label: 'Delete',
-    icon: 'i-heroicons-trash-20-solid'
-  }]
-]
-
-const selected = ref([people[1]])
-</script>
-
-<template>
-  <UTable v-model="selected" :rows="people" :columns="columns">
-    <template #name-data="{ row }">
-      <span :class="[selected.find(person => person.id === row.id) && 'text-primary-500 dark:text-primary-400']">{{ row.name }}</span>
-    </template>
-
-    <template #actions-data="{ row }">
-      <UDropdown :items="items(row)">
-        <UButton color="gray" variant="ghost" icon="i-heroicons-ellipsis-horizontal-20-solid" />
-      </UDropdown>
-    </template>
-  </UTable>
-</template>
-```
 ::
 
 ### `loading-state`
@@ -673,35 +357,10 @@ Use the `#loading-state` slot to customize the loading state.
 ---
 padding: false
 overflowClass: 'overflow-x-auto'
+component: 'table-example-loading-slot'
+componentProps:
+  class: 'flex-1'
 ---
-
-#default
-:table-example-loading-slot{class="flex-1"}
-
-#code
-```vue
-<script setup>
-const columns = [...]
-
-const people = []
-
-const pending = ref(true)
-</script>
-
-<template>
-  <UTable :rows="people" :columns="columns" :loading="pending">
-    <template #loading-state>
-      <div class="flex items-center justify-center h-32">
-        <i class="loader --6" />
-      </div>
-    </template>
-  </UTable>
-</template>
-
-<style scoped>
-/* https://codepen.io/jenning/pen/YzNmzaV */
-</style>
-```
 ::
 
 ### `empty-state`
@@ -712,29 +371,10 @@ Use the `#empty-state` slot to customize the empty state.
 ---
 padding: false
 overflowClass: 'overflow-x-auto'
+component: 'table-example-empty-slot'
+componentProps:
+  class: 'flex-1'
 ---
-
-#default
-:table-example-empty-slot{class="flex-1"}
-
-#code
-```vue
-<script setup>
-const columns = [...]
-const people = [...]
-</script>
-
-<template>
-  <UTable :rows="people" :columns="columns">
-    <template #empty-state>
-      <div class="flex flex-col items-center justify-center py-6 gap-3">
-        <span class="italic text-sm">No one here!</span>
-        <UButton label="Add people" />
-      </div>
-    </template>
-  </UTable>
-</template>
-```
 ::
 
 ## Props
diff --git a/docs/content/5.navigation/1.vertical-navigation.md b/docs/content/5.navigation/1.vertical-navigation.md
index ea5cecf6..59831ae6 100644
--- a/docs/content/5.navigation/1.vertical-navigation.md
+++ b/docs/content/5.navigation/1.vertical-navigation.md
@@ -20,39 +20,7 @@ Pass an array to the `links` prop of the VerticalNavigation component. Each link
 
 You can also pass any property from the [NuxtLink](https://nuxt.com/docs/api/components/nuxt-link#props) component such as `to`, `exact`, etc.
 
-::component-example
-#default
-:vertical-navigation-example
-
-#code
-```vue
-<script setup>
-const links = [{
-  label: 'Profile',
-  avatar: {
-    src: 'https://avatars.githubusercontent.com/u/739984?v=4'
-  },
-  badge: 100
-}, {
-  label: 'Installation',
-  icon: 'i-heroicons-home',
-  to: '/getting-started/installation'
-}, {
-  label: 'Vertical Navigation',
-  icon: 'i-heroicons-chart-bar',
-  to: '/navigation/vertical-navigation'
-}, {
-  label: 'Command Palette',
-  icon: 'i-heroicons-command-line',
-  to: '/navigation/command-palette'
-}]
-</script>
-
-<template>
-  <UVerticalNavigation :links="links" />
-</template>
-```
-::
+:component-example{component="vertical-navigation-example"}
 
 ::callout{icon="i-heroicons-light-bulb"}
 Learn how to build a Tailwind like vertical navigation in the [Examples](/getting-started/examples#verticalnavigation) page.
@@ -66,183 +34,25 @@ You can use slots to customize links display.
 
 Use the `#default` slot to customize the link label. You will have access to the `link` and `isActive` properties in the slot scope.
 
-::component-example
-#default
-:vertical-navigation-example-default-slot
-
-#code
-```vue
-<script setup>
-const links = [{
-  label: 'Navigation',
-  children: [{
-    label: 'Vertical Navigation',
-    to: '/navigation/vertical-navigation'
-  }, {
-    label: 'Command Palette',
-    to: '/navigation/command-palette'
-  }]
-}, {
-  label: 'Data',
-  children: [{
-    label: 'Table',
-    to: '/data/table'
-  }]
-}]
-</script>
-
-<template>
-  <UVerticalNavigation :links="links">
-    <template #default="{ link }">
-      <div class="relative text-left w-full">
-        <div class="mb-2">
-          {{ link.label }}
-        </div>
-        <UVerticalNavigation v-if="link.children" :links="link.children" />
-      </div>
-    </template>
-  </UVerticalNavigation>
-</template>
-```
-::
+:component-example{component="vertical-navigation-example-default-slot"}
 
 ### `avatar`
 
 Use the `#avatar` slot to customize the link avatar. You will have access to the `link` and `isActive` properties in the slot scope.
 
-::component-example
-#default
-:vertical-navigation-example-avatar-slot
-
-#code
-```vue
-<script setup>
-const links = [{
-  avatar: {
-    src: 'https://avatars.githubusercontent.com/u/739984?v=4'
-  },
-  label: 'Benjamin Canac',
-  to: 'https://github.com/benjamincanac',
-  target: '_blank'
-}, ...]
-</script>
-
-<template>
-  <UVerticalNavigation :links="links">
-    <template #avatar="{ link }">
-      <UAvatar
-        v-if="link.avatar"
-        v-bind="link.avatar"
-        size="3xs"
-      />
-      <UIcon v-else name="i-heroicons-user-circle-20-solid" class="text-lg" />
-    </template>
-  </UVerticalNavigation>
-</template>
-```
-::
+:component-example{component="vertical-navigation-example-avatar-slot"}
 
 ### `icon`
 
 Use the `#icon` slot to customize the link icon. You will have access to the `link` and `isActive` properties in the slot scope.
 
-::component-example
-#default
-:vertical-navigation-example-icon-slot
-
-#code
-```vue
-<script setup>
-const types = {
-  bug: {
-    icon: 'i-heroicons-bug-ant-20-solid',
-    color: 'text-red-500'
-  },
-  docs: {
-    icon: 'i-heroicons-document-text-20-solid',
-    color: 'text-blue-500'
-  },
-  lock: {
-    icon: 'i-heroicons-lock-closed-20-solid',
-    color: 'text-gray dark:text-white'
-  },
-  default: {
-    icon: 'i-heroicons-question-mark-circle-20-solid',
-    color: 'text-green-500'
-  }
-}
-const links = [{
-  label: 'UDropdown and UPopover dropdown menu, dropdown will be obscured',
-  type: 'bug'
-}, {
-  label: 'Uncaught (in promise) ReferenceError: ref is not defined',
-  type: 'lock'
-}, {
-  label: 'Fully styled and customizable components for Nuxt.',
-  type: 'docs'
-}, {
-  label: 'Can I pass a tailwind color to UNotifications with `toast.add()` ?'
-}]
-</script>
-
-<template>
-  <UVerticalNavigation :links="links">
-    <template #icon="{ link }">
-      <UIcon v-if="link.type" :name="types[link.type].icon" :class="types[link.type].color" class="text-base" />
-      <UIcon v-else :name="types.default.icon" :class="types.default.color" class="text-base" />
-    </template>
-  </UVerticalNavigation>
-</template>
-```
-::
+:component-example{component="vertical-navigation-example-icon-slot"}
 
 ### `badge`
 
 Use the `#badge` slot to customize the link badge. You will have access to the `link` and `isActive` properties in the slot scope.
 
-::component-example
-#default
-:vertical-navigation-example-badge-slot
-
-#code
-```vue
-<script setup>
-const links = [{
-  label: '.github',
-  icon: 'i-heroicons-folder-20-solid',
-  badge: 'chore(github): use pnpm 8',
-  time: 'last month'
-}, {
-  label: '.editorconfig',
-  icon: 'i-heroicons-document-solid',
-  badge: 'Initial commit',
-  time: '2 years ago'
-}, {
-  label: '.package.json',
-  icon: 'i-heroicons-document-solid',
-  badge: 'chore(deps): bump',
-  time: '16 hours ago'
-}]
-</script>
-
-<template>
-  <UVerticalNavigation
-    :links="links"
-    class="w-full"
-    :ui="{
-      label: 'truncate relative text-gray-900 dark:text-white flex-initial w-32 text-left'
-    }"
-  >
-    <template #badge="{ link }">
-      <div class="flex-1 flex justify-between relative truncate">
-        <div>{{ link.badge }}</div>
-        <div>{{ link.time }}</div>
-      </div>
-    </template>
-  </UVerticalNavigation>
-</template>
-```
-::
+:component-example{component="vertical-navigation-example-badge-slot"}
 
 ## Props
 
diff --git a/docs/content/5.navigation/2.command-palette.md b/docs/content/5.navigation/2.command-palette.md
index 070456b8..cf8fbf37 100644
--- a/docs/content/5.navigation/2.command-palette.md
+++ b/docs/content/5.navigation/2.command-palette.md
@@ -17,85 +17,15 @@ Use a `v-model` to display a searchable and selectable list of commands.
 ::component-example
 ---
 padding: false
+component: 'command-palette-example-basic'
+componentProps:
+  class: 'h-[257px]'
 ---
-
-#default
-:command-palette-example-basic{class="h-[257px]"}
-
-#code
-```vue
-<script setup>
-const people = [
-  { id: 1, label: 'Wade Cooper' },
-  { id: 2, label: 'Arlene Mccoy' },
-  { id: 3, label: 'Devon Webb' },
-  { id: 4, label: 'Tom Cook' },
-  { id: 5, label: 'Tanya Fox' },
-  { id: 6, label: 'Hellen Schmidt' },
-  { id: 7, label: 'Caroline Schultz' },
-  { id: 8, label: 'Mason Heaney' },
-  { id: 9, label: 'Claudie Smitham' },
-  { id: 10, label: 'Emil Schaefer' }
-]
-
-const selected = ref([people[3]])
-</script>
-
-<template>
-  <UCommandPalette
-    v-model="selected"
-    multiple
-    nullable
-    :groups="[{ key: 'people', commands: people }]"
-    :fuse="{ resultLimit: 6, fuseOptions: { threshold: 0.1 } }"
-  />
-</template>
-```
 ::
 
 You can put a `CommandPalette` anywhere you want but it's most commonly used inside of a modal.
 
-::component-example
-#default
-:command-palette-example-modal
-
-#code
-```vue
-<script setup>
-const isOpen = ref(false)
-
-const people = [
-  { id: 1, label: 'Wade Cooper' },
-  { id: 2, label: 'Arlene Mccoy' },
-  { id: 3, label: 'Devon Webb' },
-  { id: 4, label: 'Tom Cook' },
-  { id: 5, label: 'Tanya Fox' },
-  { id: 6, label: 'Hellen Schmidt' },
-  { id: 7, label: 'Caroline Schultz' },
-  { id: 8, label: 'Mason Heaney' },
-  { id: 9, label: 'Claudie Smitham' },
-  { id: 10, label: 'Emil Schaefer' }
-]
-
-const selected = ref([])
-</script>
-
-<template>
-  <div>
-    <UButton label="Open" @click="isOpen = true" />
-
-    <UModal v-model="isOpen">
-      <UCommandPalette
-        v-model="selected"
-        multiple
-        nullable
-        :groups="[{ key: 'people', commands: people }]"
-      />
-    </UModal>
-  </div>
-</template>
-```
-::
+:component-example{component="command-palette-example-modal"}
 
 You can pass multiple groups of commands to the component. Each group will be separated by a divider and will display a label.
 
@@ -104,60 +34,10 @@ Without a `v-model`, you can also listen on `@update:model-value` to navigate to
 ::component-example
 ---
 padding: false
+component: 'command-palette-example-groups'
+componentProps:
+  class: 'h-[274px]'
 ---
-
-#default
-:command-palette-example-groups{class="h-[274px]"}
-
-#code
-```vue
-<script setup>
-const router = useRouter()
-const toast = useToast()
-
-const commandPaletteRef = ref()
-
-const users = [
-  { id: 'benjamincanac', label: 'benjamincanac', href: 'https://github.com/benjamincanac', target: '_blank', avatar: { src: 'https://avatars.githubusercontent.com/u/739984?v=4' } },
-  { id: 'Atinux', label: 'Atinux', href: 'https://github.com/Atinux', target: '_blank', avatar: { src: 'https://avatars.githubusercontent.com/u/904724?v=4' } },
-  { id: 'smarroufin', label: 'smarroufin', href: 'https://github.com/smarroufin', target: '_blank', avatar: { src: 'https://avatars.githubusercontent.com/u/7547335?v=4' } }
-]
-
-const actions = [
-  { id: 'new-file', label: 'Add new file', icon: 'i-heroicons-document-plus', click: () => toast.add({ title: 'New file added!' }), shortcuts: ['⌘', 'N'] },
-  { id: 'new-folder', label: 'Add new folder', icon: 'i-heroicons-folder-plus', click: () => toast.add({ title: 'New folder added!' }), shortcuts: ['⌘', 'F'] },
-  { id: 'hashtag', label: 'Add hashtag', icon: 'i-heroicons-hashtag', click: () => toast.add({ title: 'Hashtag added!' }), shortcuts: ['⌘', 'H'] },
-  { id: 'label', label: 'Add label', icon: 'i-heroicons-tag', click: () => toast.add({ title: 'Label added!' }), shortcuts: ['⌘', 'L'] }
-]
-
-const groups = computed(() =>
-  [commandPaletteRef.value?.query ? {
-    key: 'users',
-    commands: users
-  } : {
-    key: 'recent',
-    label: 'Recent searches',
-    commands: users.slice(0, 1)
-  }, {
-    key: 'actions',
-    commands: actions
-  }].filter(Boolean))
-
-function onSelect (option) {
-  if (option.click) {
-    option.click()
-  } else if (option.to) {
-    router.push(option.to)
-  } else if (option.href) {
-    window.open(option.href, '_blank')
-  }
-}
-</script>
-
-<template>
-  <UCommandPalette ref="commandPaletteRef" :groups="groups" @update:model-value="onSelect" />
-</template>
-```
 ::
 
 ### Icon
@@ -293,34 +173,10 @@ You can also pass an `async` function to the `search` property of a group to per
 ::component-example
 ---
 padding: false
+component: 'command-palette-example-async'
+componentProps:
+  class: 'h-[274px]'
 ---
-
-#default
-:command-palette-example-async{class="h-[274px]"}
-#code
-```vue
-<script setup>
-const groups = computed(() => {
-  return [{
-    key: 'users',
-    label: q => q && `Users matching “${q}”...`,
-    search: async (q) => {
-      if (!q) {
-        return []
-      }
-
-      const users = await $fetch(`https://jsonplaceholder.typicode.com/users`, { params: { q } })
-
-      return users.map(user => ({ id: user.id, label: user.name, suffix: user.email }))
-    }
-  }].filter(Boolean)
-})
-</script>
-
-<template>
-  <UCommandPalette :groups="groups" />
-</template>
-```
 ::
 
 ::callout{icon="i-heroicons-light-bulb"}
@@ -353,32 +209,14 @@ The 4 slots above will have access to the `group`, `command`, `active` and `sele
 
 Use the `#empty-state` slot to customize the empty state.
 
-::component-example{class="grid"}
+::component-example
 ---
 padding: false
 overflowClass: 'overflow-x-auto'
+component: 'command-palette-example-empty-slot'
+componentProps:
+  class: 'flex-1'
 ---
-
-#default
-:command-palette-example-empty-slot{class="flex-1"}
-
-#code
-```vue
-<script setup>
-const groups = [...]
-</script>
-
-<template>
-  <UCommandPalette :groups="groups">
-    <template #empty-state>
-      <div class="flex flex-col items-center justify-center py-6 gap-3">
-        <span class="italic text-sm">Nothing here!</span>
-        <UButton label="Add item" />
-      </div>
-    </template>
-  </UCommandPalette>
-</template>
-```
 ::
 
 ## Props
diff --git a/docs/content/5.navigation/3.pagination.md b/docs/content/5.navigation/3.pagination.md
index a9ccc537..feaa98c3 100644
--- a/docs/content/5.navigation/3.pagination.md
+++ b/docs/content/5.navigation/3.pagination.md
@@ -10,22 +10,7 @@ links:
 
 Use a `v-model` to get a reactive page alongside a `total` which represents the total of items. You can also use the `page-count` prop to define the number of items per page which defaults to `10`.
 
-::component-example
-#default
-:pagination-example-basic
-
-#code
-```vue
-<script setup>
-const page = ref(1)
-const items = ref(Array(55))
-</script>
-
-<template>
-  <UPagination v-model="page" :page-count="5" :total="items.length" />
-</template>
-```
-::
+:component-example{component="pagination-example-basic"}
 
 ### Max
 
@@ -110,34 +95,7 @@ excludedProps:
 
 Use the `#prev` and `#next` slots to set the content of the previous and next buttons.
 
-::component-example
-#default
-:pagination-example-prev-next-slots
-
-#code
-```vue
-<script setup>
-const page = ref(1);
-const items = ref(Array(55));
-</script>
-
-<template>
-  <UPagination v-model="page" :total="items.length" :ui="{ rounded: 'first-of-type:rounded-s-md last-of-type:rounded-e-md' }">
-    <template #prev="{ onClick }">
-      <UTooltip text="Previous page">
-        <UButton icon="i-heroicons-arrow-small-left-20-solid" color="primary" :ui="{ rounded: 'rounded-full' }" class="rtl:[&_span:first-child]:rotate-180 me-2" @click="onClick" />
-      </UTooltip>
-    </template>
-
-    <template #next="{ onClick }">
-      <UTooltip text="Next page">
-        <UButton icon="i-heroicons-arrow-small-right-20-solid" color="primary" :ui="{ rounded: 'rounded-full' }" class="rtl:[&_span:last-child]:rotate-180 ms-2" @click="onClick" />
-      </UTooltip>
-    </template>
-  </UPagination>
-</template>
-```
-::
+:component-example{component="pagination-example-prev-next-slots"}
 
 ## Props
 
diff --git a/docs/content/5.navigation/4.tabs.md b/docs/content/5.navigation/4.tabs.md
index 9f25dfbb..a29ecbd6 100644
--- a/docs/content/5.navigation/4.tabs.md
+++ b/docs/content/5.navigation/4.tabs.md
@@ -15,71 +15,19 @@ Pass an array to the `items` prop of the Tabs component. Each item can have the
 - `content` - The content to display in the panel by default.
 - `disabled` - Determines whether the item is disabled or not.
 
-::component-example
-#default
-:tabs-example-basic{class="w-full"}
-
-#code
-```vue
-<script setup>
-const items = [{
-  label: 'Tab1',
-  content: 'This is the content shown for Tab1'
-}, {
-  label: 'Tab2',
-  disabled: true,
-  content: 'And, this is the content for Tab2'
-}, {
-  label: 'Tab3',
-  content: 'Finally, this is the content for Tab3'
-}]
-</script>
-
-<template>
-  <UTabs :items="items" />
-</template>
-```
-::
+:component-example{component="tabs-example-basic" :componentProps='{"class": "w-full"}'}
 
 ### Vertical
 
 You can change the orientation of the tabs by setting the `orientation` prop to `vertical`.
 
-::component-example
-#default
-:tabs-example-vertical{class="w-full"}
-
-#code
-```vue
-<script setup>
-const items = [...]
-</script>
-
-<template>
-  <UTabs :items="items" orientation="vertical" :ui="{ wrapper: 'flex items-center gap-4', list: { width: 'w-48' } }" />
-</template>
-```
-::
+:component-example{component="tabs-example-vertical" :componentProps='{"class": "w-full"}'}
 
 ### Default index
 
 You can set the default index of the tabs by setting the `default-index` prop.
 
-::component-example
-#default
-:tabs-example-index{class="w-full"}
-
-#code
-```vue
-<script setup>
-const items = [...]
-</script>
-
-<template>
-  <UTabs :items="items" :default-index="2" />
-</template>
-```
-::
+:component-example{component="tabs-example-index" :componentProps='{"class": "w-full"}'}
 
 ::callout{icon="i-heroicons-exclamation-triangle"}
   This will have no effect if you are using a `v-model` to control the selected index.
@@ -89,65 +37,13 @@ const items = [...]
 
 You can listen to changes by using the `@change` event. The event will emit the index of the selected item.
 
-::component-example
-#default
-:tabs-example-change{class="w-full"}
-
-#code
-```vue
-<script setup>
-const items = [...]
-
-function onChange (index) {
-  const item = items[index]
-
-  alert(`${item.label} was clicked!`)
-}
-</script>
-
-<template>
-  <UTabs :items="items" @change="onChange" />
-</template>
-```
-::
+:component-example{component="tabs-example-change" :componentProps='{"class": "w-full"}'}
 
 ### Control the selected index
 
 Use a `v-model` to control the selected index.
 
-::component-example
-#default
-:tabs-example-v-model{class="w-full"}
-
-#code
-```vue
-<script setup>
-const items = [...]
-
-const route = useRoute()
-const router = useRouter()
-
-const selected = computed({
-  get () {
-    const index = items.findIndex((item) => item.label === route.query.tab)
-    if (index === -1) {
-      return 0
-    }
-
-    return index
-  },
-  set (value) {
-    // Hash is specified here to prevent the page from scrolling to the top
-    router.replace({ query: { tab: items[value].label }, hash: '#control-the-selected-index' })
-  }
-})
-</script>
-
-<template>
-  <UTabs v-model="selected" :items="items" />
-</template>
-```
-::
+:component-example{component="tabs-example-v-model" :componentProps='{"class": "w-full"}'}
 
 ::callout{icon="i-heroicons-information-circle"}
 In this example, we are binding tabs to the route query. Refresh the page to see the selected tab change.
@@ -161,201 +57,17 @@ You can use slots to customize the buttons and items content of the Accordion.
 
 Use the `#default` slot to customize the content of the trigger buttons. You will have access to the `item`, `index`, `selected` and `disabled` in the slot scope.
 
-::component-example
-#default
-:tabs-example-default-slot
-
-#code
-```vue
-<script setup>
-const items = [{
-  label: 'Introduction',
-  icon: 'i-heroicons-information-circle',
-  content: 'This is the content shown for Tab1'
-}, {
-  label: 'Installation',
-  icon: 'i-heroicons-arrow-down-tray',
-  content: 'And, this is the content for Tab2'
-}, {
-  label: 'Theming',
-  icon: 'i-heroicons-eye-dropper',
-  content: 'Finally, this is the content for Tab3'
-}]
-</script>
-
-<template>
-  <UTabs :items="items" class="w-full">
-    <template #default="{ item, index, selected }">
-      <div class="flex items-center gap-2 relative truncate">
-        <UIcon :name="item.icon" class="w-4 h-4 flex-shrink-0" />
-
-        <span class="truncate">{{ index + 1 }}. {{ item.label }}</span>
-
-        <span v-if="selected" class="absolute -right-4 w-2 h-2 rounded-full bg-primary-500 dark:bg-primary-400" />
-      </div>
-    </template>
-  </UTabs>
-</template>
-```
-::
+:component-example{component="tabs-example-default-slot"}
 
 ### `item`
 
 Use the `#item` slot to customize the items content. You will have access to the `item`, `index` and `selected` properties in the slot scope.
 
-::component-example
-#default
-:tabs-example-item-slot
-
-#code
-```vue
-<script setup>
-const items = [{
-  key: 'account',
-  label: 'Account',
-  description: 'Make changes to your account here. Click save when you\'re done.'
-}, {
-  key: 'password',
-  label: 'Password',
-  description: 'Change your password here. After saving, you\'ll be logged out.'
-}]
-
-const accountForm = reactive({ name: 'Benjamin', username: 'benjamincanac'  })
-const passwordForm = reactive({ currentPassword: '', newPassword: '' })
-
-function onSubmit (form) {
-  console.log('Submitted form:', form)
-}
-</script>
-
-<template>
-  <UTabs :items="items" class="w-full">
-    <template #item="{ item }">
-      <UCard @submit.prevent="() => onSubmit(item.key === 'account' ? accountForm : passwordForm)">
-        <template #header>
-          <h3 class="text-base font-semibold leading-6 text-gray-900 dark:text-white">
-            {{ item.label }}
-          </h3>
-          <p class="mt-1 text-sm text-gray-500 dark:text-gray-400">
-            {{ item.description }}
-          </p>
-        </template>
-
-        <div v-if="item.key === 'account'" class="space-y-3">
-          <UFormGroup label="Name" name="name">
-            <UInput v-model="accountForm.name" />
-          </UFormGroup>
-          <UFormGroup label="Username" name="username">
-            <UInput v-model="accountForm.username" />
-          </UFormGroup>
-        </div>
-        <div v-else-if="item.key === 'password'" class="space-y-3">
-          <UFormGroup label="Current Password" name="current" required>
-            <UInput v-model="passwordForm.currentPassword" type="password" required />
-          </UFormGroup>
-          <UFormGroup label="New Password" name="new" required>
-            <UInput v-model="passwordForm.newPassword" type="password" required />
-          </UFormGroup>
-        </div>
-
-        <template #footer>
-          <UButton type="submit" color="black">
-            Save {{ item.key === 'account' ? 'account' : 'password' }}
-          </UButton>
-        </template>
-      </UCard>
-    </template>
-  </UTabs>
-</template>
-```
-::
+:component-example{component="tabs-example-item-slot"}
 
 You can also pass a `slot` property to customize a specific item.
 
-::component-example
-#default
-:tabs-example-item-custom-slot
-
-#code
-```vue
-<script setup>
-const items = [{
-  slot: 'account',
-  label: 'Account'
-}, {
-  slot: 'password',
-  label: 'Password'
-}]
-
-const accountForm = reactive({ name: 'Benjamin', username: 'benjamincanac'  })
-const passwordForm = reactive({ currentPassword: '', newPassword: '' })
-
-function onSubmitAccount () {
-  console.log('Submitted form:', accountForm)
-}
-
-function onSubmitPassword () {
-  console.log('Submitted form:', passwordForm)
-}
-</script>
-
-<template>
-  <UTabs :items="items" class="w-full">
-    <template #account="{ item }">
-      <UCard @submit.prevent="onSubmitAccount">
-        <template #header>
-          <h3 class="text-base font-semibold leading-6 text-gray-900 dark:text-white">
-            {{ item.label }}
-          </h3>
-          <p class="mt-1 text-sm text-gray-500 dark:text-gray-400">
-            Make changes to your account here. Click save when you're done.
-          </p>
-        </template>
-
-        <UFormGroup label="Name" name="name" class="mb-3">
-          <UInput v-model="accountForm.name" />
-        </UFormGroup>
-        <UFormGroup label="Username" name="username">
-          <UInput v-model="accountForm.username" />
-        </UFormGroup>
-
-        <template #footer>
-          <UButton type="submit" color="black">
-            Save account
-          </UButton>
-        </template>
-      </UCard>
-    </template>
-
-    <template #password="{ item }">
-      <UCard @submit.prevent="onSubmitPassword">
-        <template #header>
-          <h3 class="text-base font-semibold leading-6 text-gray-900 dark:text-white">
-            {{ item.label }}
-          </h3>
-          <p class="mt-1 text-sm text-gray-500 dark:text-gray-400">
-            Change your password here. After saving, you'll be logged out.
-          </p>
-        </template>
-
-        <UFormGroup label="Current Password" name="current" required class="mb-3">
-          <UInput v-model="passwordForm.currentPassword" type="password" required />
-        </UFormGroup>
-        <UFormGroup label="New Password" name="new" required>
-          <UInput v-model="passwordForm.newPassword" type="password" required />
-        </UFormGroup>
-
-        <template #footer>
-          <UButton type="submit" color="black">
-            Save password
-          </UButton>
-        </template>
-      </UCard>
-    </template>
-  </UTabs>
-</template>
-```
-::
+:component-example{component="tabs-example-item-custom-slot"}
 
 ## Props
 
diff --git a/docs/content/6.overlays/1.modal.md b/docs/content/6.overlays/1.modal.md
index 21476648..9e98234a 100644
--- a/docs/content/6.overlays/1.modal.md
+++ b/docs/content/6.overlays/1.modal.md
@@ -13,154 +13,29 @@ links:
 
 Use a `v-model` to control the Modal state.
 
-::component-example
-#default
-:modal-example-basic
-
-#code
-```vue
-<script setup>
-const isOpen = ref(false)
-</script>
-
-<template>
-  <div>
-    <UButton label="Open" @click="isOpen = true" />
-
-    <UModal v-model="isOpen">
-      <!-- Content -->
-    </UModal>
-  </div>
-</template>
-```
-::
+:component-example{component="modal-example-basic"}
 
 You can put a [Card](/layout/card) component inside your Modal to handle forms and take advantage of `header` and `footer` slots:
 
-::component-example
-#default
-:modal-example-card
-
-#code
-```vue
-<script setup>
-const isOpen = ref(false)
-</script>
-
-<template>
-  <div>
-    <UButton label="Open" @click="isOpen = true" />
-
-    <UModal v-model="isOpen">
-      <UCard :ui="{ divide: 'divide-y divide-gray-100 dark:divide-gray-800' }">
-        <template #header>
-          <!-- Content -->
-        </template>
-
-        <!-- Content -->
-
-        <template #footer>
-          <!-- Content -->
-        </template>
-      </UCard>
-    </UModal>
-  </div>
-</template>
-```
-::
+:component-example{component="modal-example-card"}
 
 ### Disable overlay
 
 Set the `overlay` prop to `false` to disable it.
 
-::component-example
-#default
-:modal-example-disable-overlay
-
-#code
-```vue
-<script setup>
-const isOpen = ref(false)
-</script>
-
-<template>
-  <div>
-    <UButton label="Open" @click="isOpen = true" />
-
-    <UModal v-model="isOpen" :overlay="false">
-      <div class="p-4">
-        <Placeholder class="h-48" />
-      </div>
-    </UModal>
-  </div>
-</template>
-```
-::
+:component-example{component="modal-example-disable-overlay"}
 
 ### Disable transition
 
 Set the `transition` prop to `false` to disable it.
 
-::component-example
-#default
-:modal-example-disable-transition
-
-#code
-```vue
-<script setup>
-const isOpen = ref(false)
-</script>
-
-<template>
-  <div>
-    <UButton label="Open" @click="isOpen = true" />
-
-    <UModal v-model="isOpen" :transition="false">
-      <div class="p-4">
-        <Placeholder class="h-48" />
-      </div>
-    </UModal>
-  </div>
-</template>
-```
-::
+:component-example{component="modal-example-disable-transition"}
 
 ### Prevent close
 
 Use the `prevent-close` prop to disable the outside click alongside the `esc` keyboard shortcut.
 
-::component-example
-#default
-:modal-example-prevent-close
-
-#code
-```vue
-<script setup>
-const isOpen = ref(false)
-</script>
-
-<template>
-  <div>
-    <UButton label="Open" @click="isOpen = true" />
-
-    <UModal v-model="isOpen" prevent-close>
-      <UCard :ui="{ ring: '', divide: 'divide-y divide-gray-100 dark:divide-gray-800' }">
-        <template #header>
-          <div class="flex items-center justify-between">
-            <h3 class="text-base font-semibold leading-6 text-gray-900 dark:text-white">
-              Modal
-            </h3>
-            <UButton color="gray" variant="ghost" icon="i-heroicons-x-mark-20-solid" class="-my-1" @click="isOpen = false" />
-          </div>
-        </template>
-
-        <Placeholder class="h-32" />
-      </UCard>
-    </UModal>
-  </div>
-</template>
-```
-::
+:component-example{component="modal-example-prevent-close"}
 
 You can still handle the `esc` shortcut yourself by using our [defineShortcuts](/getting-started/shortcuts#defineshortcuts) composable.
 
@@ -182,47 +57,7 @@ defineShortcuts({
 
 Set the `fullscreen` prop to `true` to enable it.
 
-::component-example
-#default
-:modal-example-fullscreen
-
-#code
-```vue
-<script setup>
-const isOpen = ref(false)
-</script>
-
-<template>
-  <div>
-    <UButton label="Open" @click="isOpen = true" />
-
-    <UModal v-model="isOpen" fullscreen>
-      <UCard
-        :ui="{
-          base: 'h-full flex flex-col',
-          rounded: '',
-          divide: 'divide-y divide-gray-100 dark:divide-gray-800',
-          body: {
-            base: 'grow'
-          }
-        }"
-      >
-        <template #header>
-          <div class="flex items-center justify-between">
-            <h3 class="text-base font-semibold leading-6 text-gray-900 dark:text-white">
-              Modal
-            </h3>
-            <UButton color="gray" variant="ghost" icon="i-heroicons-x-mark-20-solid" class="-my-1" @click="isOpen = false" />
-          </div>
-        </template>
-
-        <Placeholder class="h-full" />
-      </UCard>
-    </UModal>
-  </div>
-</template>
-```
-::
+:component-example{component="modal-example-fullscreen"}
 
 ## Props
 
diff --git a/docs/content/6.overlays/2.slideover.md b/docs/content/6.overlays/2.slideover.md
index 37ec96f3..5ccdde1a 100644
--- a/docs/content/6.overlays/2.slideover.md
+++ b/docs/content/6.overlays/2.slideover.md
@@ -13,153 +13,29 @@ links:
 
 Use a `v-model` to control the Slideover state.
 
-::component-example
-#default
-:slideover-example-basic
-#code
-```vue
-<script setup>
-const isOpen = ref(false)
-</script>
-
-<template>
-  <div>
-    <UButton label="Open" @click="isOpen = true" />
-
-    <USlideover v-model="isOpen">
-      <!-- Content -->
-    </USlideover>
-  </div>
-</template>
-```
-::
+:component-example{component="slideover-example-basic"}
 
 You can put a [Card](/layout/card) component inside your Slideover to handle forms and take advantage of `header` and `footer` slots:
 
-::component-example
-#default
-:slideover-example-card
-
-#code
-```vue
-<script setup>
-const isOpen = ref(false)
-</script>
-
-<template>
-  <div>
-    <UButton label="Open" @click="isOpen = true" />
-
-    <USlideover v-model="isOpen">
-      <UCard class="flex flex-col flex-1" :ui="{ body: { base: 'flex-1' }, ring: '', divide: 'divide-y divide-gray-100 dark:divide-gray-800' }">
-        <template #header>
-          <!-- Content -->
-        </template>
-
-        <!-- Content -->
-
-        <template #footer>
-          <!-- Content -->
-        </template>
-      </UCard>
-    </USlideover>
-  </div>
-</template>
-```
-::
+:component-example{component="slideover-example-card"}
 
 ### Disable overlay
 
 Set the `overlay` prop to `false` to disable it.
 
-::component-example
-#default
-:slideover-example-disable-overlay
-
-#code
-```vue
-<script setup>
-const isOpen = ref(false)
-</script>
-
-<template>
-  <div>
-    <UButton label="Open" @click="isOpen = true" />
-
-    <USlideover v-model="isOpen" :overlay="false">
-      <div class="p-4 flex-1">
-        <Placeholder class="h-full" />
-      </div>
-    </USlideover>
-  </div>
-</template>
-```
-::
+:component-example{component="slideover-example-disable-overlay"}
 
 ### Disable transition
 
 Set the `transition` prop to `false` to disable it.
 
-::component-example
-#default
-:slideover-example-disable-transition
-
-#code
-```vue
-<script setup>
-const isOpen = ref(false)
-</script>
-
-<template>
-  <div>
-    <UButton label="Open" @click="isOpen = true" />
-
-    <USlideover v-model="isOpen" :transition="false">
-      <div class="p-4 flex-1">
-        <Placeholder class="h-full" />
-      </div>
-    </USlideover>
-  </div>
-</template>
-```
-::
+:component-example{component="slideover-example-disable-transition"}
 
 ### Prevent close
 
 Use the `prevent-close` prop to disable the outside click alongside the `esc` keyboard shortcut.
 
-::component-example
-#default
-:slideover-example-prevent-close
-
-#code
-```vue
-<script setup>
-const isOpen = ref(false)
-</script>
-
-<template>
-  <div>
-    <UButton label="Open" @click="isOpen = true" />
-
-    <USlideover v-model="isOpen" prevent-close>
-      <UCard class="flex flex-col flex-1" :ui="{ body: { base: 'flex-1' }, ring: '', divide: 'divide-y divide-gray-100 dark:divide-gray-800' }">
-        <template #header>
-          <div class="flex items-center justify-between">
-            <h3 class="text-base font-semibold leading-6 text-gray-900 dark:text-white">
-              Slideover
-            </h3>
-            <UButton color="gray" variant="ghost" icon="i-heroicons-x-mark-20-solid" class="-my-1" @click="isOpen = false" />
-          </div>
-        </template>
-
-        <Placeholder class="h-full" />
-      </UCard>
-    </USlideover>
-  </div>
-</template>
-```
-::
+:component-example{component="slideover-example-prevent-close"}
 
 You can still handle the `esc` shortcut yourself by using our [defineShortcuts](/getting-started/shortcuts#defineshortcuts) composable.
 
diff --git a/docs/content/6.overlays/3.popover.md b/docs/content/6.overlays/3.popover.md
index 07338a3e..569657b2 100644
--- a/docs/content/6.overlays/3.popover.md
+++ b/docs/content/6.overlays/3.popover.md
@@ -11,44 +11,13 @@ links:
 
 ## Usage
 
-::component-example
-#default
-:popover-example
-
-#code
-```vue
-<template>
-  <UPopover>
-    <UButton color="white" label="Open" trailing-icon="i-heroicons-chevron-down-20-solid" />
-
-    <template #panel>
-      <!-- Content -->
-    </template>
-  </UPopover>
-</template>
-```
-::
+:component-example{component="popover-example"}
 
 ### Mode
 
 Use the `mode` prop to switch between `click` and `hover` modes.
 
-::component-example
-#default
-:popover-example-mode
-#code
-```vue
-<template>
-  <UPopover mode="hover">
-    <UButton color="white" label="Open" trailing-icon="i-heroicons-chevron-down-20-solid" />
-
-    <template #panel>
-      <!-- Content -->
-    </template>
-  </UPopover>
-</template>
-```
-::
+:component-example{component="popover-example-mode"}
 
 ## Slots
 
@@ -56,25 +25,7 @@ Use the `mode` prop to switch between `click` and `hover` modes.
 
 Use the `#panel` slot to fill the content of the panel. You will have access to the `open` property and the `close` method in the slot scope.
 
-::component-example
-#default
-:popover-example-slot
-
-#code
-```vue
-<template>
-  <UPopover>
-    <UButton color="white" label="Open" trailing-icon="i-heroicons-chevron-down-20-solid" />
-
-    <template #panel="{ close }">
-      <div class="p-8">
-        <UButton label="Close" @click="close" />
-      </div>
-    </template>
-  </UPopover>
-</template>
-```
-::
+:component-example{component="popover-example-slot"}
 
 ## Props
 
diff --git a/docs/content/6.overlays/4.tooltip.md b/docs/content/6.overlays/4.tooltip.md
index 9da1f454..74c4d291 100644
--- a/docs/content/6.overlays/4.tooltip.md
+++ b/docs/content/6.overlays/4.tooltip.md
@@ -8,18 +8,7 @@ links:
 
 ## Usage
 
-::component-example
-#default
-:tooltip-example
-#code
-```vue
-<template>
-  <UTooltip text="Tooltip example" :shortcuts="['⌘', 'O']">
-    <UButton color="gray" label="Hover me" />
-  </UTooltip>
-</template>
-```
-::
+:component-example{component="tooltip-example"}
 
 ## Slots
 
diff --git a/docs/content/6.overlays/5.context-menu.md b/docs/content/6.overlays/5.context-menu.md
index 71782e36..e49d7d58 100644
--- a/docs/content/6.overlays/5.context-menu.md
+++ b/docs/content/6.overlays/5.context-menu.md
@@ -9,42 +9,7 @@ links:
 
 ## Usage
 
-::component-example
-#default
-:context-menu-example
-#code
-```vue
-<script setup>
-const { x, y } = useMouse()
-const { y: windowY } = useWindowScroll()
-
-const isOpen = ref(false)
-const virtualElement = ref({ getBoundingClientRect: () => ({}) })
-
-function onContextMenu () {
-  const top = unref(y) - unref(windowY)
-  const left = unref(x)
-
-  virtualElement.value.getBoundingClientRect = () => ({
-    width: 0,
-    height: 0,
-    top,
-    left
-  })
-
-  isOpen.value = true
-}
-</script>
-
-<template>
-  <div @contextmenu.prevent="onContextMenu">
-    <UContextMenu v-model="isOpen" :virtual-element="virtualElement">
-      <!-- Content -->
-    </UContextMenu>
-  </div>
-</template>
-```
-::
+:component-example{component="context-menu-example"}
 
 ## Props
 
diff --git a/docs/content/6.overlays/6.notification.md b/docs/content/6.overlays/6.notification.md
index edbcb2b0..b7bbb009 100644
--- a/docs/content/6.overlays/6.notification.md
+++ b/docs/content/6.overlays/6.notification.md
@@ -37,20 +37,7 @@ export default defineAppConfig({
 
 Then, you can use the `useToast` composable to add notifications to your app:
 
-::component-example
-#default
-:notification-example-basic
-#code
-```vue
-<script setup>
-const toast = useToast()
-</script>
-
-<template>
-  <UButton label="Show toast" @click="toast.add({ title: 'Hello world!' })" />
-</template>
-```
-::
+:component-example{component="notification-example-basic"}
 
 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`.
 
@@ -179,7 +166,7 @@ options:
   - name: color
     restriction: included
     values:
-      - gray   
+      - gray
 excludedProps:
   - icon
 ---
@@ -189,47 +176,13 @@ excludedProps:
 
 Use the `click` prop to execute a function when the Notification is clicked.
 
-::component-example
-#default
-:notification-example-click
-#code
-```vue
-<script setup>
-const toast = useToast()
-
-function onClick () {
-  alert('Clicked!')
-}
-</script>
-
-<template>
-  <UButton label="Show toast" @click="toast.add({ title: 'Click me', click: onClick })" />
-</template>
-```
-::
+:component-example{component="notification-example-click"}
 
 ### Callback
 
 Use the `callback` prop to execute a function when the Notification expires.
 
-::component-example
-#default
-:notification-example-callback
-#code
-```vue
-<script setup>
-const toast = useToast()
-
-function onCallback () {
-  alert('Notification expired!')
-}
-</script>
-
-<template>
-  <UButton label="Show toast" @click="toast.add({ title: 'Expires soon...', timeout: 1000, callback: onCallback })" />
-</template>
-```
-::
+:component-example{component="notification-example-callback"}
 
 ### Close
 
@@ -261,20 +214,7 @@ excludedProps:
 
 Use the `actions` prop to add actions to the Notification.
 
-::component-example
-#default
-:notification-example-actions
-#code
-```vue
-<script setup>
-const toast = useToast()
-</script>
-
-<template>
-  <UButton label="Show toast" @click="toast.add({ title: 'Click me', click: () => alert('Clicked!') })" />
-</template>
-```
-::
+:component-example{component="notification-example-actions"}
 
 Like for `closeButton`, you can pass all the props of the [Button](/elements/button) component inside the action or globally through `ui.notification.default.actionButton`.
 
@@ -341,21 +281,7 @@ This can be handy when you want to display HTML content. To achieve this, you ca
 
 This way, you can use HTML tags in the `title` and `description` props when using `useToast`.
 
-::component-example
-#default
-:notification-example-html
-
-#code
-```vue
-<script setup>
-const toast = useToast()
-</script>
-
-<template>
-  <UButton label="Show toast" @click="toast.add({ title: 'Notification <i>italic</i>', description: 'This is an <u>underlined</u> and <b>bold</b> notification.' })" />
-</template>
-```
-::
+:component-example{component="notification-example-html"}
 
 ::callout{icon="i-heroicons-light-bulb"}
 Slots defined in the `<UNotifications />` component are automatically passed down to the `Notification` children.
diff --git a/docs/content/7.layout/1.card.md b/docs/content/7.layout/1.card.md
index 62cc2c04..5f63782d 100644
--- a/docs/content/7.layout/1.card.md
+++ b/docs/content/7.layout/1.card.md
@@ -8,23 +8,7 @@ links:
 
 ## Usage
 
-::component-example
-#default
-:card-example{class="w-full"}
-
-#code
-```vue
-<template>
-  <UCard>
-    <template #header />
-
-    Body
-
-    <template #footer />
-  </UCard>
-</template>
-```
-::
+:component-example{component="card-example" :componentProps='{"class": "w-full"}'}
 
 ## Slots
 
diff --git a/docs/content/7.layout/2.container.md b/docs/content/7.layout/2.container.md
index 5dc8bd67..b8b86223 100644
--- a/docs/content/7.layout/2.container.md
+++ b/docs/content/7.layout/2.container.md
@@ -8,17 +8,7 @@ links:
 
 ## Usage
 
-::component-example
-#default
-:container-example{class="w-full"}
-
-#code
-```vue
-<template>
-  <UContainer>Content</UContainer>
-</template>
-```
-::
+:component-example{component="container-example" :componentProps='{"class": "w-full"}'}
 
 ## Props
 
diff --git a/docs/content/7.layout/3.skeleton.md b/docs/content/7.layout/3.skeleton.md
index e9b912ba..b0b294db 100644
--- a/docs/content/7.layout/3.skeleton.md
+++ b/docs/content/7.layout/3.skeleton.md
@@ -10,23 +10,7 @@ links:
 
 Use to show a placeholder while content is loading.
 
-::component-example
-#default
-:skeleton-example
-
-#code
-```vue
-<template>
-  <div class="flex items-center space-x-4">
-    <USkeleton class="h-12 w-12" :ui="{ rounded: 'rounded-full' }" />
-    <div class="space-y-2">
-      <USkeleton class="h-4 w-[250px]" />
-      <USkeleton class="h-4 w-[200px]" />
-    </div>
-  </div>
-</template>
-```
-::
+:component-example{component="skeleton-example"}
 
 ## Props
 
diff --git a/docs/content/7.layout/4.divider.md b/docs/content/7.layout/4.divider.md
index 8b39b450..729b353e 100644
--- a/docs/content/7.layout/4.divider.md
+++ b/docs/content/7.layout/4.divider.md
@@ -52,61 +52,7 @@ excludedProps:
 
 You can change the orientation of the divider by setting the `orientation` prop to `horizontal` or `vertical`. Defaults to `horizontal`.
 
-::component-example
-#default
-:divider-example-orientation
-
-#code
-```vue
-<script setup>
-const form = reactive({ email: 'mail@example.com', password: 'password' })
-</script>
-
-<template>
-  <div class="w-full flex flex-col gap-y-4">
-    <UCard :ui="{ body: { base: 'grid grid-cols-3' } }">
-      <div class="space-y-4">
-        <UFormGroup label="Email" name="email">
-          <UInput v-model="form.email" />
-        </UFormGroup>
-
-        <UFormGroup label="Password" name="password">
-          <UInput v-model="form.password" type="password" />
-        </UFormGroup>
-
-        <UButton label="Login" color="gray" block />
-      </div>
-
-      <UDivider label="OR" color="gray" orientation="vertical" />
-
-      <div class="space-y-4 flex flex-col justify-center">
-        <UButton color="black" label="Login with GitHub" icon="i-simple-icons-github" block />
-        <UButton color="black" label="Login with Google" icon="i-simple-icons-google" block />
-      </div>
-    </UCard>
-
-    <UCard>
-      <div class="space-y-4">
-        <UFormGroup label="Email" name="email">
-          <UInput v-model="form.email" />
-        </UFormGroup>
-
-        <UFormGroup label="Password" name="password">
-          <UInput v-model="form.password" type="password" />
-        </UFormGroup>
-
-        <UButton label="Login" color="gray" block />
-
-        <UDivider label="OR" color="gray" />
-
-        <UButton color="black" label="Login with GitHub" icon="i-simple-icons-github" block />
-        <UButton color="black" label="Login with Google" icon="i-simple-icons-google" block />
-      </div>
-    </UCard>
-  </div>
-</template>
-```
-::
+:component-example{component="divider-example-orientation"}
 
 ### Type
 
@@ -162,18 +108,7 @@ excludedProps:
 
 Use the `default` slot to add content to the divider.
 
-::component-example
-#default
-:divider-example-default-slot
-#code
-```vue
-<template>
-  <UDivider>
-    <Logo class="w-28 h-6" />
-  </UDivider>
-</template>
-```
-::
+:component-example{component="divider-example-default-slot"}
 
 ## Props
 
diff --git a/docs/modules/content-examples-code.ts b/docs/modules/content-examples-code.ts
new file mode 100644
index 00000000..aa1cb146
--- /dev/null
+++ b/docs/modules/content-examples-code.ts
@@ -0,0 +1,138 @@
+import {
+  defineNuxtModule,
+  addTemplate,
+  addServerHandler,
+  createResolver
+} from '@nuxt/kit'
+
+import { existsSync, readFileSync } from 'fs'
+import { dirname, join } from 'pathe'
+import fsp from 'fs/promises'
+
+export default defineNuxtModule({
+  meta: {
+    name: 'content-examples-code'
+  },
+  async setup (_options, nuxt) {
+    const resolver = createResolver(import.meta.url)
+    let _configResolved: any
+    let components: Record<string, any>
+    const outputPath = join(nuxt.options.buildDir, 'content-examples-code')
+
+    async function stubOutput () {
+      if (existsSync(outputPath + '.mjs')) {
+        return
+      }
+      await updateOutput('export default {}')
+    }
+
+    async function fetchComponent (component: string | any) {
+      if (typeof component === 'string') {
+        if (components[component]) {
+          component = components[component]
+        } else {
+          component = Object.entries(components).find(
+            ([, comp]: any) => comp.filePath === component
+          )
+          if (!component) {
+            return
+          }
+
+          component = component[1]
+        }
+      }
+
+      if (!component?.filePath || !component?.pascalName) {
+        return
+      }
+      const code = await fsp.readFile(component.filePath, 'utf-8')
+      components[component.pascalName] = {
+        code,
+        filePath: component.filePath,
+        pascalName: component.pascalName
+      }
+    }
+    const getStringifiedComponents = () => JSON.stringify(components, null, 2)
+
+    const getVirtualModuleContent = () =>
+      `export default ${getStringifiedComponents()}`
+
+    async function updateOutput (content?: string) {
+      const path = outputPath + '.mjs'
+      if (!existsSync(dirname(path))) {
+        await fsp.mkdir(dirname(path), { recursive: true })
+      }
+      if (existsSync(path)) {
+        await fsp.unlink(path)
+      }
+      await fsp.writeFile(path, content || getVirtualModuleContent(), 'utf-8')
+    }
+
+    async function fetchComponents () {
+      await Promise.all(Object.keys(components).map(fetchComponent))
+    }
+
+    nuxt.hook('components:extend', async (_components) => {
+      components = _components
+        .filter(
+          (v) =>
+            v.shortPath.startsWith('components/content/examples/') ||
+            v.shortPath.startsWith('components/content/themes/')
+        )
+        .reduce((acc, component) => {
+          acc[component.pascalName] = component
+          return acc
+        }, {})
+      await stubOutput()
+    })
+
+    addTemplate({
+      filename: 'content-examples-code.mjs',
+      getContents: () => 'export default {}',
+      write: true
+    })
+
+    nuxt.hook('vite:extend', (vite: any) => {
+      vite.config.plugins = vite.config.plugins || []
+      vite.config.plugins.push({
+        name: 'content-examples-code',
+        enforce: 'post',
+        async buildStart () {
+          if (_configResolved?.build.ssr) {
+            return
+          }
+          await fetchComponents()
+          await updateOutput()
+        },
+        configResolved (config) {
+          _configResolved = config
+        },
+        async handleHotUpdate ({ file }) {
+          if (
+            Object.entries(components).some(
+              ([, comp]: any) => comp.filePath === file
+            )
+          ) {
+            await fetchComponent(file)
+            await updateOutput()
+          }
+        }
+      })
+    })
+
+    nuxt.hook('nitro:config', (nitroConfig) => {
+      nitroConfig.virtual = nitroConfig.virtual || {}
+      nitroConfig.virtual['#content-examples-code/nitro'] = () =>
+        readFileSync(
+          join(nuxt.options.buildDir, '/content-examples-code.mjs'),
+          'utf-8'
+        )
+    })
+
+    addServerHandler({
+      method: 'get',
+      route: '/api/content-examples-code/:component?',
+      handler: resolver.resolve('../server/api/content-examples-code.get')
+    })
+  }
+})
diff --git a/docs/nuxt.config.ts b/docs/nuxt.config.ts
index 80f11ce9..e2cfcdb7 100644
--- a/docs/nuxt.config.ts
+++ b/docs/nuxt.config.ts
@@ -18,7 +18,8 @@ export default defineNuxtConfig({
     '@nuxtjs/google-fonts',
     '@nuxtjs/plausible',
     '@vueuse/nuxt',
-    'nuxt-component-meta'
+    'nuxt-component-meta',
+    'modules/content-examples-code'
   ],
   runtimeConfig: {
     public: {
diff --git a/docs/server/api/content-examples-code.get.ts b/docs/server/api/content-examples-code.get.ts
new file mode 100644
index 00000000..4c38f4e9
--- /dev/null
+++ b/docs/server/api/content-examples-code.get.ts
@@ -0,0 +1,19 @@
+import { defineEventHandler, createError, appendHeader } from 'h3'
+import { pascalCase } from 'scule'
+// @ts-expect-error
+import components from '#content-examples-code/nitro'
+
+export default defineEventHandler((event) => {
+  appendHeader(event, 'Access-Control-Allow-Origin', '*')
+  const componentName = (event.context.params['component?'] || '').replace(/\.json$/, '')
+  if (componentName) {
+    const component = components[pascalCase(componentName)]
+    if (!component) {
+      throw createError({
+        statusMessage: 'Examples not found!',
+        statusCode: 404
+      })
+    }
+    return component
+  }
+})