From 7a8c00c37451f7b9b33630f7a790a12c0fb2caa1 Mon Sep 17 00:00:00 2001
From: Romain Hamel <rom.hml@gmail.com>
Date: Fri, 28 Feb 2025 15:33:13 +0100
Subject: [PATCH] feat(module)!: remove devtools in favor of compodium (#3380)

Co-authored-by: Benjamin Canac <canacb1@gmail.com>
---
 .github/workflows/module.yml                  |   3 -
 build.config.ts                               |   5 +-
 devtools/app/app.config.ts                    |   8 -
 devtools/app/app.vue                          | 198 ------------------
 devtools/app/components/CollapseContainer.vue |  43 ----
 devtools/app/components/ComponentPreview.vue  | 151 -------------
 .../app/components/ComponentPropInput.vue     |  39 ----
 devtools/app/components/UILogo.vue            |  10 -
 devtools/app/components/inputs/ArrayInput.vue |  76 -------
 .../app/components/inputs/BooleanInput.vue    |  20 --
 .../app/components/inputs/NumberInput.vue     |  15 --
 .../app/components/inputs/ObjectInput.vue     |  38 ----
 .../app/components/inputs/StringEnumInput.vue |  60 ------
 .../app/components/inputs/StringInput.vue     |  15 --
 devtools/app/composables/usePropSchema.ts     |  44 ----
 devtools/app/composables/useShiki.ts          |  34 ---
 devtools/app/plugins/prettier.client.ts       |  54 -----
 devtools/app/workers/prettier.js              |  36 ----
 devtools/nuxt.config.ts                       |  38 ----
 devtools/package.json                         |  19 --
 devtools/public/favicon.svg                   |   1 -
 .../test/composables/usePropSchema.test.ts    |  24 ---
 devtools/test/fixtures/schemas.ts             | 133 ------------
 devtools/test/vitest.config.ts                |   7 -
 devtools/tsconfig.json                        |   4 -
 docs/app/composables/useLinks.ts              |  31 ++-
 docs/content/1.getting-started/1.index.md     |  18 +-
 .../2.installation/1.nuxt.md                  |  17 --
 .../content/1.getting-started/contribution.md |   1 -
 docs/nuxt.config.ts                           |   4 +-
 eslint.config.mjs                             |   2 -
 package.json                                  |  14 +-
 playground/nuxt.config.ts                     |  24 +--
 pnpm-lock.yaml                                |  30 ---
 pnpm-workspace.yaml                           |   1 -
 src/defaults.ts                               |   3 -
 src/devtools/meta.ts                          | 148 -------------
 src/devtools/runtime/DevtoolsRenderer.vue     |  72 -------
 .../runtime/examples/AvatarGroupExample.vue   |   7 -
 .../runtime/examples/ButtonGroupExample.vue   |   8 -
 src/devtools/runtime/examples/CardExample.vue |  13 --
 .../runtime/examples/CarouselExample.vue      |  13 --
 src/devtools/runtime/examples/ChipExample.vue |   5 -
 .../runtime/examples/CollapsibleExample.vue   |   8 -
 .../examples/CommandPaletteExample.vue        |  29 ---
 .../runtime/examples/ContainerExample.vue     |   5 -
 .../runtime/examples/ContextMenuExample.vue   |   5 -
 .../runtime/examples/DrawerExample.vue        |   8 -
 .../runtime/examples/DropdownMenuExample.vue  |   5 -
 src/devtools/runtime/examples/FormExample.vue |  30 ---
 .../runtime/examples/FormFieldExample.vue     |   5 -
 src/devtools/runtime/examples/LinkExample.vue |   5 -
 .../runtime/examples/ModalExample.vue         |   8 -
 .../runtime/examples/PopoverExample.vue       |   8 -
 .../runtime/examples/SkeletonExample.vue      |   3 -
 .../runtime/examples/SlideoverExample.vue     |   8 -
 .../runtime/examples/StepperExample.vue       |  44 ----
 .../runtime/examples/ToasterExample.vue       |  11 -
 .../runtime/examples/TooltipExample.vue       |   5 -
 src/module.ts                                 |  93 +-------
 src/runtime/components/Accordion.vue          |  32 ---
 src/runtime/components/Alert.vue              |   3 -
 src/runtime/components/App.vue                |   3 -
 src/runtime/components/Avatar.vue             |   3 -
 src/runtime/components/AvatarGroup.vue        |   3 -
 src/runtime/components/Badge.vue              |   3 -
 src/runtime/components/Breadcrumb.vue         |  26 ---
 src/runtime/components/Button.vue             |   4 -
 src/runtime/components/ButtonGroup.vue        |   3 -
 src/runtime/components/Card.vue               |   3 -
 src/runtime/components/Carousel.vue           |   3 -
 src/runtime/components/Checkbox.vue           |   3 -
 src/runtime/components/Chip.vue               |   3 -
 src/runtime/components/Collapsible.vue        |   3 -
 src/runtime/components/CommandPalette.vue     |   3 -
 src/runtime/components/Container.vue          |   3 -
 src/runtime/components/ContextMenu.vue        |  62 ------
 src/runtime/components/Drawer.vue             |   3 -
 src/runtime/components/DropdownMenu.vue       |  50 -----
 src/runtime/components/Form.vue               |   3 -
 src/runtime/components/FormField.vue          |   3 -
 src/runtime/components/InputMenu.vue          |   3 -
 src/runtime/components/Kbd.vue                |   2 -
 src/runtime/components/Link.vue               |   3 -
 src/runtime/components/Modal.vue              |   3 -
 src/runtime/components/NavigationMenu.vue     |  40 ----
 src/runtime/components/Pagination.vue         |   3 -
 src/runtime/components/Popover.vue            |   3 -
 src/runtime/components/RadioGroup.vue         |   3 -
 src/runtime/components/Select.vue             |   3 -
 src/runtime/components/SelectMenu.vue         |   3 -
 src/runtime/components/Skeleton.vue           |   3 -
 src/runtime/components/Slideover.vue          |   3 -
 src/runtime/components/Stepper.vue            |   3 -
 src/runtime/components/Switch.vue             |   3 -
 src/runtime/components/Tabs.vue               |  19 --
 src/runtime/components/Toast.vue              |   3 -
 src/runtime/components/Toaster.vue            |   3 -
 src/runtime/components/Tooltip.vue            |   3 -
 src/runtime/components/Tree.vue               |  36 ----
 src/runtime/composables/extendDevtoolsMeta.ts |   8 -
 src/unplugin.ts                               |   2 +-
 tsconfig.json                                 |   2 +-
 103 files changed, 52 insertions(+), 2090 deletions(-)
 delete mode 100644 devtools/app/app.config.ts
 delete mode 100644 devtools/app/app.vue
 delete mode 100644 devtools/app/components/CollapseContainer.vue
 delete mode 100644 devtools/app/components/ComponentPreview.vue
 delete mode 100644 devtools/app/components/ComponentPropInput.vue
 delete mode 100644 devtools/app/components/UILogo.vue
 delete mode 100644 devtools/app/components/inputs/ArrayInput.vue
 delete mode 100644 devtools/app/components/inputs/BooleanInput.vue
 delete mode 100644 devtools/app/components/inputs/NumberInput.vue
 delete mode 100644 devtools/app/components/inputs/ObjectInput.vue
 delete mode 100644 devtools/app/components/inputs/StringEnumInput.vue
 delete mode 100644 devtools/app/components/inputs/StringInput.vue
 delete mode 100644 devtools/app/composables/usePropSchema.ts
 delete mode 100644 devtools/app/composables/useShiki.ts
 delete mode 100644 devtools/app/plugins/prettier.client.ts
 delete mode 100644 devtools/app/workers/prettier.js
 delete mode 100644 devtools/nuxt.config.ts
 delete mode 100644 devtools/package.json
 delete mode 100644 devtools/public/favicon.svg
 delete mode 100644 devtools/test/composables/usePropSchema.test.ts
 delete mode 100644 devtools/test/fixtures/schemas.ts
 delete mode 100644 devtools/test/vitest.config.ts
 delete mode 100644 devtools/tsconfig.json
 delete mode 100644 src/devtools/meta.ts
 delete mode 100644 src/devtools/runtime/DevtoolsRenderer.vue
 delete mode 100644 src/devtools/runtime/examples/AvatarGroupExample.vue
 delete mode 100644 src/devtools/runtime/examples/ButtonGroupExample.vue
 delete mode 100644 src/devtools/runtime/examples/CardExample.vue
 delete mode 100644 src/devtools/runtime/examples/CarouselExample.vue
 delete mode 100644 src/devtools/runtime/examples/ChipExample.vue
 delete mode 100644 src/devtools/runtime/examples/CollapsibleExample.vue
 delete mode 100644 src/devtools/runtime/examples/CommandPaletteExample.vue
 delete mode 100644 src/devtools/runtime/examples/ContainerExample.vue
 delete mode 100644 src/devtools/runtime/examples/ContextMenuExample.vue
 delete mode 100644 src/devtools/runtime/examples/DrawerExample.vue
 delete mode 100644 src/devtools/runtime/examples/DropdownMenuExample.vue
 delete mode 100644 src/devtools/runtime/examples/FormExample.vue
 delete mode 100644 src/devtools/runtime/examples/FormFieldExample.vue
 delete mode 100644 src/devtools/runtime/examples/LinkExample.vue
 delete mode 100644 src/devtools/runtime/examples/ModalExample.vue
 delete mode 100644 src/devtools/runtime/examples/PopoverExample.vue
 delete mode 100644 src/devtools/runtime/examples/SkeletonExample.vue
 delete mode 100644 src/devtools/runtime/examples/SlideoverExample.vue
 delete mode 100644 src/devtools/runtime/examples/StepperExample.vue
 delete mode 100644 src/devtools/runtime/examples/ToasterExample.vue
 delete mode 100644 src/devtools/runtime/examples/TooltipExample.vue
 delete mode 100644 src/runtime/composables/extendDevtoolsMeta.ts

diff --git a/.github/workflows/module.yml b/.github/workflows/module.yml
index 24cbb8d6..dd6104bc 100644
--- a/.github/workflows/module.yml
+++ b/.github/workflows/module.yml
@@ -43,9 +43,6 @@ jobs:
       - name: Prepare
         run: pnpm run dev:prepare
 
-      - name: Devtools prepare
-        run: pnpm run devtools:prepare
-
       - name: Lint
         run: pnpm run lint
 
diff --git a/build.config.ts b/build.config.ts
index fef778b4..6f7143a7 100644
--- a/build.config.ts
+++ b/build.config.ts
@@ -2,8 +2,6 @@ import { defineBuildConfig } from 'unbuild'
 
 export default defineBuildConfig({
   entries: [
-    // Include devtools runtime files
-    { input: './src/devtools/runtime', builder: 'mkdist', outDir: 'dist/devtools/runtime' },
     // Vue support
     './src/unplugin',
     './src/vite'
@@ -12,8 +10,7 @@ export default defineBuildConfig({
     emitCJS: true
   },
   replace: {
-    'process.env.DEV': 'false',
-    'process.env.NUXT_UI_DEVTOOLS_LOCAL': 'false'
+    'process.env.DEV': 'false'
   },
   hooks: {
     'mkdist:entry:options'(ctx, entry, options) {
diff --git a/devtools/app/app.config.ts b/devtools/app/app.config.ts
deleted file mode 100644
index aec89678..00000000
--- a/devtools/app/app.config.ts
+++ /dev/null
@@ -1,8 +0,0 @@
-export default defineAppConfig({
-  ui: {
-    colors: {
-      primary: 'green',
-      neutral: 'zinc'
-    }
-  }
-})
diff --git a/devtools/app/app.vue b/devtools/app/app.vue
deleted file mode 100644
index bf279960..00000000
--- a/devtools/app/app.vue
+++ /dev/null
@@ -1,198 +0,0 @@
-<script setup lang="ts">
-import type { Component } from '../../src/devtools/meta'
-import { watchDebounced } from '@vueuse/core'
-
-// Disable devtools in component renderer iframe
-// @ts-expect-error - Nuxt Devtools internal value
-window.__NUXT_DEVTOOLS_DISABLE__ = true
-
-const component = useState<Component | undefined>('__ui-devtools-component')
-const state = useState<Record<string, any>>('__ui-devtools-state', () => ({}))
-
-const { data: components, status, error } = useAsyncData<Array<Component>>('__ui-devtools-components', async () => {
-  const componentMeta = await $fetch<Record<string, Component>>('/api/component-meta')
-
-  if (!component.value || !componentMeta[component.value.slug]) {
-    component.value = componentMeta['button']
-  }
-
-  state.value.props = Object.values(componentMeta).reduce((acc, comp) => {
-    const componentDefaultProps = comp.meta?.props.reduce((acc, prop) => {
-      if (prop.default) acc[prop.name] = prop.default
-      return acc
-    }, {} as Record<string, any>)
-
-    acc[comp.slug] = {
-      ...comp.defaultVariants, // Default values from the theme template
-      ...componentDefaultProps, // Default values from vue props
-      ...componentMeta[comp.slug]?.meta?.devtools?.defaultProps // Default values from devtools extended meta
-    }
-
-    return acc
-  }, {} as Record<string, any>)
-
-  return Object.values(componentMeta)
-})
-
-const componentProps = computed(() => {
-  if (!component.value) return
-  return state.value.props[component.value?.slug]
-})
-
-const componentPropsMeta = computed(() => {
-  return component.value?.meta?.props.filter(prop => prop.name !== 'ui').sort((a, b) => a.name.localeCompare(b.name))
-})
-
-function updateRenderer() {
-  if (!component.value) return
-  const event: Event & { data?: any } = new Event('nuxt-ui-devtools:update-renderer')
-  event.data = {
-    props: state.value.props?.[component.value.slug], slots: state.value.slots?.[component.value?.slug]
-  }
-  window.dispatchEvent(event)
-}
-
-watchDebounced(state, updateRenderer, { deep: true, debounce: 200, maxWait: 500 })
-onMounted(() => window.addEventListener('nuxt-ui-devtools:component-loaded', onComponentLoaded))
-onUnmounted(() => window.removeEventListener('nuxt-ui-devtools:component-loaded', onComponentLoaded))
-
-function onComponentLoaded() {
-  if (!component.value) return
-  updateRenderer()
-}
-
-const tabs = computed(() => {
-  if (!component.value) return
-  return [
-    { label: 'Props', slot: 'props', icon: 'i-lucide-settings', disabled: !component.value.meta?.props?.length }
-  ]
-})
-
-function openDocs() {
-  if (!component.value) return
-  window.parent.open(`https://ui3.nuxt.dev/components/${component.value.slug}`)
-}
-
-const colorMode = useColorMode()
-const isDark = computed({
-  get() {
-    return colorMode.value === 'dark'
-  },
-  set(value) {
-    colorMode.preference = value ? 'dark' : 'light'
-
-    const event: Event & { isDark?: boolean } = new Event('nuxt-ui-devtools:set-color-mode')
-    event.isDark = value
-    window.dispatchEvent(event)
-  }
-})
-</script>
-
-<template>
-  <UApp>
-    <div v-if="status === 'pending' || error || !component || !components?.length">
-      <div v-if="error" class="flex flex-col justify-center items-center h-screen w-screen text-center text-(--ui-error)">
-        <UILogo class="h-8" />
-        <UIcon name="i-lucide-circle-alert" size="20" class="mt-2" />
-        <p>
-          {{ (error.data as any)?.error ?? 'Unexpected error' }}
-        </p>
-      </div>
-    </div>
-    <template v-else>
-      <div class="top-0 h-[49px] border-b border-(--ui-border) flex justify-center">
-        <span />
-
-        <UInputMenu
-          v-model="component"
-          variant="none"
-          :items="components"
-          placeholder="Search component..."
-          class="top-0 translate-y-0 w-full mx-2"
-          icon="i-lucide-search"
-        />
-
-        <div class="absolute top-[49px] bottom-0 inset-x-0 grid xl:grid-cols-8 grid-cols-4 bg-(--ui-bg)">
-          <div class="col-span-1 border-r border-(--ui-border) hidden xl:block overflow-y-auto">
-            <UNavigationMenu
-              :items="components.map((c) => ({ ...c, active: c.slug === component?.slug, onSelect: () => component = c }))"
-              orientation="vertical"
-              :ui="{ link: 'before:rounded-none' }"
-            />
-          </div>
-
-          <div class="xl:col-span-5 col-span-2 relative">
-            <ComponentPreview :component="component" :props="componentProps" class="h-full" />
-            <div class="flex gap-2 absolute top-1 right-2">
-              <UButton
-                :icon="isDark ? 'i-lucide-moon' : 'i-lucide-sun'"
-                variant="ghost"
-                color="neutral"
-                @click="isDark = !isDark"
-              />
-              <UButton
-                v-if="component"
-                variant="ghost"
-                color="neutral"
-                icon="i-lucide-external-link"
-                @click="openDocs()"
-              >
-                Open docs
-              </UButton>
-            </div>
-          </div>
-
-          <div class="border-l border-(--ui-border) flex flex-col col-span-2 overflow-y-auto">
-            <UTabs color="neutral" variant="link" :items="tabs" class="relative" :ui="{ list: 'sticky top-0 bg-(--ui-bg) z-50' }">
-              <template #props>
-                <div v-for="prop in componentPropsMeta" :key="'prop-' + prop.name" class="px-3 py-5 border-b border-(--ui-border)">
-                  <ComponentPropInput
-                    v-model="componentProps[prop.name]"
-                    :meta="prop"
-                    :ignore="component.meta?.devtools?.ignoreProps?.includes(prop.name)"
-                  />
-                </div>
-              </template>
-            </UTabs>
-          </div>
-        </div>
-      </div>
-    </template>
-  </UApp>
-</template>
-
-<style>
-@import 'tailwindcss';
-@import '@nuxt/ui';
-
-@theme {
-  --font-sans: 'DM Sans', sans-serif;
-
-  --color-green-50: #EFFDF5;
-  --color-green-100: #D9FBE8;
-  --color-green-200: #B3F5D1;
-  --color-green-300: #75EDAE;
-  --color-green-400: #00DC82;
-  --color-green-500: #00C16A;
-  --color-green-600: #00A155;
-  --color-green-700: #007F45;
-  --color-green-800: #016538;
-  --color-green-900: #0A5331;
-  --color-green-950: #052E16;
-}
-
-.shiki
-.shiki span {
-  background-color: transparent !important;
-}
-
-html.dark .shiki,
-html.dark .shiki span {
-  color: var(--shiki-dark) !important;
-  background-color: transparent !important;
-  /* Optional, if you also want font styles */
-  font-style: var(--shiki-dark-font-style) !important;
-  font-weight: var(--shiki-dark-font-weight) !important;
-  text-decoration: var(--shiki-dark-text-decoration) !important;
-}
-</style>
diff --git a/devtools/app/components/CollapseContainer.vue b/devtools/app/components/CollapseContainer.vue
deleted file mode 100644
index 3da4858d..00000000
--- a/devtools/app/components/CollapseContainer.vue
+++ /dev/null
@@ -1,43 +0,0 @@
-<script setup lang="ts">
-import { ref, computed, onMounted } from 'vue'
-
-const collapsed = ref(true)
-const wrapper = ref<HTMLElement | null>(null)
-const content = ref<HTMLElement | null>(null)
-
-const overflow = computed(() => {
-  if (!content.value || !wrapper.value) return false
-  return content.value.scrollHeight > 48 * 4
-})
-
-onMounted(() => {
-  if (wrapper.value) {
-    wrapper.value.style.transition = 'max-height 0.3s ease' // Set transition for max-height
-  }
-})
-</script>
-
-<template>
-  <div class="border rounded-(--ui-radius) border-(--ui-border)">
-    <div
-      ref="wrapper"
-      :class="['overflow-hidden', collapsed && overflow ? 'max-h-48' : 'max-h-none']"
-    >
-      <div ref="content">
-        <slot />
-      </div>
-    </div>
-    <UButton
-      v-if="overflow"
-      class="bg-(--ui-bg) group w-full flex justify-center my-1 border-t border-(--ui-border) rounded-t-none"
-      variant="link"
-      color="neutral"
-      trailing-icon="i-lucide-chevron-down"
-      :data-state="collapsed ? 'closed' : 'open'"
-      :ui="{ trailingIcon: 'transition group-data-[state=open]:rotate-180' }"
-      @click="collapsed = !collapsed"
-    >
-      {{ collapsed ? 'Expand' : 'Collapse' }}
-    </UButton>
-  </div>
-</template>
diff --git a/devtools/app/components/ComponentPreview.vue b/devtools/app/components/ComponentPreview.vue
deleted file mode 100644
index f1e5c312..00000000
--- a/devtools/app/components/ComponentPreview.vue
+++ /dev/null
@@ -1,151 +0,0 @@
-<script setup lang="ts">
-import type { Component } from '../../../src/devtools/meta'
-import { useClipboard } from '@vueuse/core'
-import { kebabCase } from 'scule'
-import { escapeString } from 'knitwork'
-
-const props = defineProps<{ component?: Component, props?: object, themeSlots?: Record<string, any> }>()
-
-const { data: componentExample } = useAsyncData('__ui_devtools_component-source', async () => {
-  const example = props.component?.meta?.devtools?.example
-  if (!example) return false
-  return await $fetch<{ source: string }>(`/api/component-example`, { params: { component: example } })
-}, { watch: [() => props.component?.slug] })
-
-function genPropValue(value: any): string {
-  if (typeof value === 'string') {
-    return `'${escapeString(value).replace(/'/g, '&apos;').replace(/"/g, '&quot;')}'`
-  }
-  if (Array.isArray(value)) {
-    return `[ ${value.map(item => `${genPropValue(item)}`).join(',')} ]`
-  }
-  if (typeof value === 'object' && value !== null) {
-    const entries = Object.entries(value).map(([key, val]) => `${key}: ${genPropValue(val)}`)
-    return `{ ${entries.join(`,`)} }`
-  }
-
-  return value
-}
-
-const code = computed(() => {
-  if (!props.component) return
-
-  const propsTemplate = Object.entries(props.props ?? {})?.map(([key, value]: [string, any]) => {
-    const defaultValue: any = props.component?.meta?.props.find(prop => prop.name === key)?.default
-    if (defaultValue === value) return
-    if (value === true) return kebabCase(key)
-    if (value === false && defaultValue === true) return `:${kebabCase(key)}="false"`
-    if (!value) return
-    if (props.component?.defaultVariants?.[key] === value) return
-    if (typeof value === 'string') return `${kebabCase(key)}=${genPropValue(value)}`
-    return `:${kebabCase(key)}="${genPropValue(value)}"`
-  }).filter(Boolean).join('\n')
-
-  const slotsTemplate = props.themeSlots
-    ? genPropValue(Object.keys(props.themeSlots).filter(key => key !== 'base').reduce((acc, key) => {
-        acc[key] = genPropValue(props.themeSlots?.[key])
-        return acc
-      }, {} as Record<string, string>))
-    : undefined
-
-  const extraTemplate = [
-    propsTemplate,
-    props.themeSlots?.base ? `class="${genPropValue(props.themeSlots.base)}"` : null,
-    slotsTemplate && slotsTemplate !== '{}' ? `:ui="${slotsTemplate}"` : null
-  ].filter(Boolean).join(' ')
-
-  if (componentExample.value) {
-    const componentRegexp = new RegExp(`<${props.component.label}(\\s|\\r|>)`)
-
-    return componentExample.value?.source
-      .replace(/import .* from ['"]#.*['"];?\n+/, '')
-      .replace(componentRegexp, `<${props.component.label} ${extraTemplate}$1`)
-      .replace('v-bind="$attrs"', '')
-  }
-  return `<${props.component.label} ${extraTemplate} />`
-})
-
-const { $prettier } = useNuxtApp()
-const { data: formattedCode } = useAsyncData('__ui-devtools-component-formatted-code', async () => {
-  if (!code.value) return
-  return await $prettier.format(code.value, {
-    semi: false,
-    singleQuote: true,
-    printWidth: 80
-  })
-}, { watch: [code] })
-
-const { codeToHtml } = useShiki()
-const { data: highlightedCode } = useAsyncData('__ui-devtools-component-highlighted-code', async () => {
-  return formattedCode.value
-    ? codeToHtml(formattedCode.value, 'vue')
-    : undefined
-}, { watch: [formattedCode] })
-
-const { copy, copied } = useClipboard()
-
-const rendererVisible = ref(true)
-const renderer = ref()
-const rendererReady = ref(false)
-function onRendererReady() {
-  rendererReady.value = true
-  setTimeout(() => rendererVisible.value = !!renderer.value.contentWindow.document.getElementById('ui-devtools-renderer'), 500)
-}
-
-watch(() => props.component, () => rendererReady.value = false)
-
-const previewUrl = computed(() => {
-  if (!props.component) return
-  const baseUrl = `/__nuxt_ui__/components/${props.component.slug}`
-  const params = new URLSearchParams()
-
-  if (props.component?.meta?.devtools?.example !== undefined) {
-    params.append('example', props.component.meta.devtools.example)
-  }
-  const queryString = params.toString()
-  return queryString ? `${baseUrl}?${queryString}` : baseUrl
-})
-</script>
-
-<template>
-  <div class="flex flex-col bg-grid">
-    <iframe
-      v-if="component"
-      v-show="rendererReady && rendererVisible"
-      ref="renderer"
-      class="grow w-full"
-      :src="previewUrl"
-      @load="onRendererReady"
-    />
-    <div v-if="!rendererVisible" class="grow w-full flex justify-center items-center px-8">
-      <UAlert color="error" variant="subtle" title="Component preview not found" icon="i-lucide-circle-alert">
-        <template #description>
-          <p>Ensure your <code>app.vue</code> file includes a <code>&lt;NuxtPage /&gt;</code> component, as the component preview is mounted as a page. </p>
-        </template>
-      </UAlert>
-    </div>
-    <div v-if="highlightedCode && formattedCode" v-show="rendererReady" class="relative w-full p-3">
-      <!-- eslint-disable vue/no-v-html -->
-      <pre class="p-4 min-h-40 max-h-72 text-sm overflow-y-auto rounded-[calc(var(--ui-radius)*1.5)] border border-(--ui-border) bg-(--ui-bg-muted)" v-html="highlightedCode" />
-      <UButton
-        color="neutral"
-        variant="link"
-        :icon="copied ? 'i-lucide-clipboard-check' : 'i-lucide-clipboard'"
-        class="absolute top-6 right-6"
-        @click="copy(formattedCode)"
-      />
-    </div>
-  </div>
-</template>
-
-<style scoped>
-.bg-grid {
-  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' transform='scale(3)'%3E%3Crect width='100%25' height='100%25' fill='%23fff'/%3E%3Cpath fill='none' stroke='hsla(0, 0%25, 98%25, 1)' stroke-width='.2' d='M10 0v20ZM0 10h20Z'/%3E%3C/svg%3E");
-  background-size: 40px 40px;
-}
-
-.dark .bg-grid {
-  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' transform='scale(3)'%3E%3Crect width='100%25' height='100%25' fill='hsl(0, 0%25, 8.5%25)'/%3E%3Cpath fill='none' stroke='hsl(0, 0%25, 11.0%25)' stroke-width='.2' d='M10 0v20ZM0 10h20Z'/%3E%3C/svg%3E");
-  background-size: 40px 40px;
-}
-</style>
diff --git a/devtools/app/components/ComponentPropInput.vue b/devtools/app/components/ComponentPropInput.vue
deleted file mode 100644
index 1e9f48c2..00000000
--- a/devtools/app/components/ComponentPropInput.vue
+++ /dev/null
@@ -1,39 +0,0 @@
-<script setup lang="ts">
-import type { PropertyMeta } from 'vue-component-meta'
-
-const props = defineProps<{ meta: Partial<PropertyMeta>, ignore?: boolean }>()
-const modelValue = defineModel<any>()
-
-const matchedInput = shallowRef()
-const parsedSchema = shallowRef()
-
-const { resolveInputSchema } = usePropSchema()
-
-watchEffect(() => {
-  if (!props.meta?.schema) return
-  const result = resolveInputSchema(props.meta.schema)
-  parsedSchema.value = result?.schema
-  matchedInput.value = result?.input
-})
-
-const description = computed(() => {
-  return props.meta.description?.replace(/`([^`]+)`/g, '<code class="font-medium bg-(--ui-bg-elevated) px-1 py-0.5 rounded-(--ui-radius)">$1</code>')
-})
-</script>
-
-<template>
-  <UFormField :name="meta?.name" class="" :ui="{ wrapper: 'mb-2' }" :class="{ 'opacity-70 cursor-not-allowed': !matchedInput || ignore }">
-    <template #label>
-      <p v-if="meta?.name" class="font-mono font-bold px-1.5 py-0.5 border border-(--ui-border-accented) border-dashed rounded-(--ui-radius) bg-(--ui-bg-elevated)">
-        {{ meta?.name }}
-      </p>
-    </template>
-
-    <template #description>
-      <!-- eslint-disable vue/no-v-html -->
-      <p v-if="meta.description" class="mt-1" v-html="description" />
-    </template>
-
-    <component :is="matchedInput.component" v-if="!ignore && matchedInput" v-model="modelValue" :schema="parsedSchema" />
-  </UFormField>
-</template>
diff --git a/devtools/app/components/UILogo.vue b/devtools/app/components/UILogo.vue
deleted file mode 100644
index 031531bf..00000000
--- a/devtools/app/components/UILogo.vue
+++ /dev/null
@@ -1,10 +0,0 @@
-<template>
-  <svg
-    width="1020"
-    height="200"
-    viewBox="0 0 1020 200"
-    fill="none"
-    xmlns="http://www.w3.org/2000/svg"
-    class="w-auto h-6 shrink-0 text-(--ui-text)"
-  ><path d="M377 200C379.16 200 381 198.209 381 196V103C381 103 386 112 395 127L434 194C435.785 197.74 439.744 200 443 200H470V50H443C441.202 50 439 51.4941 439 54V148L421 116L385 55C383.248 51.8912 379.479 50 376 50H350V200H377Z" fill="currentColor" /><path d="M726 92H739C742.314 92 745 89.3137 745 86V60H773V92H800V116H773V159C773 169.5 778.057 174 787 174H800V200H783C759.948 200 745 185.071 745 160V116H726V92Z" fill="currentColor" /><path d="M591 92V154C591 168.004 585.742 179.809 578 188C570.258 196.191 559.566 200 545 200C530.434 200 518.742 196.191 511 188C503.389 179.809 498 168.004 498 154V92H514C517.412 92 520.769 92.622 523 95C525.231 97.2459 526 98.5652 526 102V154C526 162.059 526.457 167.037 530 171C533.543 174.831 537.914 176 545 176C552.217 176 555.457 174.831 559 171C562.543 167.037 563 162.059 563 154V102C563 98.5652 563.769 96.378 566 94C567.96 91.9107 570.028 91.9599 573 92C573.411 92.0055 574.586 92 575 92H591Z" fill="currentColor" /><path d="M676 144L710 92H684C680.723 92 677.812 93.1758 676 96L660 120L645 97C643.188 94.1758 639.277 92 636 92H611L645 143L608 200H634C637.25 200 640.182 196.787 642 194L660 167L679 195C680.818 197.787 683.75 200 687 200H713L676 144Z" fill="currentColor" /><path d="M168 200H279C282.542 200 285.932 198.756 289 197C292.068 195.244 295.23 193.041 297 190C298.77 186.959 300.002 183.51 300 179.999C299.998 176.488 298.773 173.04 297 170.001L222 41C220.23 37.96 218.067 35.7552 215 34C211.933 32.2448 207.542 31 204 31C200.458 31 197.067 32.2448 194 34C190.933 35.7552 188.77 37.96 187 41L168 74L130 9.99764C128.228 6.95784 126.068 3.75491 123 2C119.932 0.245087 116.542 0 113 0C109.458 0 106.068 0.245087 103 2C99.9323 3.75491 96.7717 6.95784 95 9.99764L2 170.001C0.226979 173.04 0.00154312 176.488 1.90993e-06 179.999C-0.0015393 183.51 0.229648 186.959 2 190C3.77035 193.04 6.93245 195.244 10 197C13.0675 198.756 16.4578 200 20 200H90C117.737 200 137.925 187.558 152 164L186 105L204 74L259 168H186L168 200ZM89 168H40L113 42L150 105L125.491 147.725C116.144 163.01 105.488 168 89 168Z" fill="var(--ui-primary)" /><path d="M958 60.0001H938C933.524 60.0001 929.926 59.9395 927 63C924.074 65.8905 925 67.5792 925 72V141C925 151.372 923.648 156.899 919 162C914.352 166.931 908.468 169 899 169C889.705 169 882.648 166.931 878 162C873.352 156.899 873 151.372 873 141V72.0001C873 67.5793 872.926 65.8906 870 63.0001C867.074 59.9396 863.476 60.0001 859 60.0001H840V141C840 159.023 845.016 173.458 855 184C865.156 194.542 879.893 200 899 200C918.107 200 932.844 194.542 943 184C953.156 173.458 958 159.023 958 141V60.0001Z" fill="var(--ui-primary)" /><path fill-rule="evenodd" clip-rule="evenodd" d="M1000 60.0233L1020 60V77L1020 128V156.007L1020 181L1020 189.004C1020 192.938 1019.98 194.429 1017 197.001C1014.02 199.725 1009.56 200 1005 200H986.001V181.006L986 130.012V70.0215C986 66.1576 986.016 64.5494 989 62.023C991.819 59.6358 995.437 60.0233 1000 60.0233Z" fill="var(--ui-primary)" /></svg>
-</template>
diff --git a/devtools/app/components/inputs/ArrayInput.vue b/devtools/app/components/inputs/ArrayInput.vue
deleted file mode 100644
index fd9c6e1b..00000000
--- a/devtools/app/components/inputs/ArrayInput.vue
+++ /dev/null
@@ -1,76 +0,0 @@
-<script lang="ts">
-import * as z from 'zod'
-
-export const arrayInputSchema = z.object({
-  kind: z.literal('array'),
-  schema: z.array(z.any({}))
-    .or(z.record(z.number(), z.any({})).transform(t => Object.values(t)))
-    .transform((t) => {
-      return t.filter(s => s !== 'undefined')
-    }).pipe(z.array(z.any()).max(1))
-})
-
-export type ArrayInputSchema = z.infer<typeof arrayInputSchema>
-</script>
-
-<script setup lang="ts">
-const props = defineProps<{
-  schema: ArrayInputSchema
-}>()
-
-const modelValue = defineModel<Array<any>>({})
-
-const itemSchema = computed(() => {
-  return props.schema?.schema[0]
-})
-
-function removeArrayItem(index: number) {
-  if (!modelValue.value) return
-  modelValue.value.splice(index, 1)
-}
-
-function addArrayItem() {
-  if (!modelValue.value) {
-    modelValue.value = [{}]
-  } else {
-    modelValue.value.push({})
-  }
-}
-</script>
-
-<template>
-  <div>
-    <div v-for="value, index in modelValue" :key="index" class="relative">
-      <ComponentPropInput
-        :model-value="value"
-        :meta="{ schema: itemSchema }"
-      />
-
-      <UPopover>
-        <UButton variant="ghost" color="neutral" icon="i-lucide-ellipsis-vertical" class="absolute top-4 right-1" />
-        <template #content>
-          <UButton
-            variant="ghost"
-            color="error"
-            icon="i-lucide-trash"
-            block
-            @click="removeArrayItem(index)"
-          >
-            Remove
-          </UButton>
-        </template>
-      </UPopover>
-    </div>
-
-    <UButton
-      icon="i-lucide-plus"
-      color="neutral"
-      variant="ghost"
-      block
-      class="justify-center mt-4"
-      @click="addArrayItem()"
-    >
-      Add value
-    </UButton>
-  </div>
-</template>
diff --git a/devtools/app/components/inputs/BooleanInput.vue b/devtools/app/components/inputs/BooleanInput.vue
deleted file mode 100644
index 14c0d2de..00000000
--- a/devtools/app/components/inputs/BooleanInput.vue
+++ /dev/null
@@ -1,20 +0,0 @@
-<script lang="ts">
-import * as z from 'zod'
-
-export const booleanInputSchema = z.literal('boolean').or(z.object({
-  kind: z.literal('enum'),
-  type: z.string().refine((type) => {
-    return type.split('|').some(t => t.trim() === 'boolean')
-  })
-}))
-
-export type BooleanInputSchema = z.infer<typeof booleanInputSchema>
-</script>
-
-<script setup lang="ts">
-defineProps<{ schema: BooleanInputSchema }>()
-</script>
-
-<template>
-  <USwitch />
-</template>
diff --git a/devtools/app/components/inputs/NumberInput.vue b/devtools/app/components/inputs/NumberInput.vue
deleted file mode 100644
index 13883d0d..00000000
--- a/devtools/app/components/inputs/NumberInput.vue
+++ /dev/null
@@ -1,15 +0,0 @@
-<script lang="ts">
-import * as z from 'zod'
-
-export const numberInputSchema = z.literal('number')
-export type NumberInputSchema = z.infer<typeof numberInputSchema>
-</script>
-
-<script setup lang="ts">
-defineProps<{ schema: NumberInputSchema }>()
-const modelValue = defineModel<number>()
-</script>
-
-<template>
-  <UInput v-model.number="modelValue" type="number" />
-</template>
diff --git a/devtools/app/components/inputs/ObjectInput.vue b/devtools/app/components/inputs/ObjectInput.vue
deleted file mode 100644
index cac12d02..00000000
--- a/devtools/app/components/inputs/ObjectInput.vue
+++ /dev/null
@@ -1,38 +0,0 @@
-<script lang="ts">
-import * as z from 'zod'
-
-export const objectInputSchema = z.object({
-  kind: z.literal('object'),
-  schema: z.record(z.string(), z.any())
-})
-
-export type ObjectInputSchema = z.infer<typeof objectInputSchema>
-</script>
-
-<script setup lang="ts">
-const props = defineProps<{
-  schema: ObjectInputSchema
-}>()
-
-const modelValue = defineModel<Record<string, any>>({})
-
-const attributesSchemas = computed(() => {
-  return Object.values(props.schema.schema)
-})
-</script>
-
-<template>
-  <CollapseContainer>
-    <ComponentPropInput
-      v-for="attributeSchema in attributesSchemas"
-      :key="attributeSchema.name"
-      class="border-b last:border-b-0 border-(--ui-border) p-4"
-      :model-value="modelValue?.[attributeSchema.name]"
-      :meta="attributeSchema"
-      @update:model-value="(value: any) => {
-        if (!modelValue) modelValue ||= {}
-        else modelValue[attributeSchema.name] = value
-      }"
-    />
-  </CollapseContainer>
-</template>
diff --git a/devtools/app/components/inputs/StringEnumInput.vue b/devtools/app/components/inputs/StringEnumInput.vue
deleted file mode 100644
index 945ab4f6..00000000
--- a/devtools/app/components/inputs/StringEnumInput.vue
+++ /dev/null
@@ -1,60 +0,0 @@
-<script lang="ts">
-import * as z from 'zod'
-
-export const stringEnumInputSchema = z.object({
-  kind: z.literal('enum'),
-  schema: z.array(z.string())
-    .or(z.record(z.any(), z.string()).transform<string[]>(t => Object.values(t)))
-    .transform<string[]>(t => t.filter(s => s.trim().match(/^["'`]/)).map(s => s.trim().replaceAll(/["'`]/g, '')))
-    .pipe(z.array(z.string()).min(1))
-})
-
-export type StringEnumInputSchema = z.infer<typeof stringEnumInputSchema>
-</script>
-
-<script setup lang="ts">
-const props = defineProps<{
-  schema: StringEnumInputSchema
-}>()
-
-const sizes = ['xs', 'sm', 'md', 'lg', 'xl']
-function parseSize(size: string) {
-  const sizePattern = sizes.join('|')
-  const regex = new RegExp(`^(\\d*)(${sizePattern})$`, 'i')
-
-  const match = size.match(regex)
-
-  if (!match) return null
-
-  const number = match[1] ? Number.parseInt(match[1], 10) : 1 // Default to 1 if no number is present
-  const suffix = match[2] ?? ''
-
-  return { number, suffix }
-}
-
-const options = computed(() => {
-  return [...props.schema.schema].sort((a, b) => {
-    const sizeA = parseSize(a)
-    const sizeB = parseSize(b)
-    if (!sizeA || !sizeB) return a.localeCompare(b)
-
-    const suffixAIndex = sizes.indexOf(sizeA.suffix)
-    const suffixBIndex = sizes.indexOf(sizeB.suffix)
-
-    if (suffixAIndex !== -1 && suffixBIndex !== -1) {
-      if (suffixAIndex !== suffixBIndex) {
-        return suffixAIndex - suffixBIndex
-      }
-    } else if (suffixAIndex === -1 || suffixBIndex === -1) {
-      if (sizeA.suffix !== sizeB.suffix) {
-        return sizeA.suffix.localeCompare(sizeB.suffix)
-      }
-    }
-    return sizeA.number - sizeB.number
-  })
-})
-</script>
-
-<template>
-  <USelectMenu :items="options" class="min-w-[167px]" />
-</template>
diff --git a/devtools/app/components/inputs/StringInput.vue b/devtools/app/components/inputs/StringInput.vue
deleted file mode 100644
index bc99b932..00000000
--- a/devtools/app/components/inputs/StringInput.vue
+++ /dev/null
@@ -1,15 +0,0 @@
-<script lang="ts">
-import * as z from 'zod'
-
-export const stringInputSchema = z.literal('string').or(z.string().transform(t => t.split('|').find(s => s.trim() === 'string')).pipe(z.string()))
-
-export type StringInputSchema = z.infer<typeof stringInputSchema>
-</script>
-
-<script setup lang="ts">
-defineProps<{ schema: StringInputSchema }>()
-</script>
-
-<template>
-  <UInput />
-</template>
diff --git a/devtools/app/composables/usePropSchema.ts b/devtools/app/composables/usePropSchema.ts
deleted file mode 100644
index 8c9b529b..00000000
--- a/devtools/app/composables/usePropSchema.ts
+++ /dev/null
@@ -1,44 +0,0 @@
-import type { PropertyMeta } from 'vue-component-meta'
-import BooleanInput, { booleanInputSchema } from '../components/inputs/BooleanInput.vue'
-import StringInput, { stringInputSchema } from '../components/inputs/StringInput.vue'
-import NumberInput, { numberInputSchema } from '../components/inputs/NumberInput.vue'
-import StringEnumInput, { stringEnumInputSchema } from '../components/inputs/StringEnumInput.vue'
-import ObjectInput, { objectInputSchema } from '../components/inputs/ObjectInput.vue'
-import ArrayInput, { arrayInputSchema } from '../components/inputs/ArrayInput.vue'
-
-// List of available inputs.
-const availableInputs = [
-  { id: 'string', schema: stringInputSchema, component: StringInput },
-  { id: 'number', schema: numberInputSchema, component: NumberInput },
-  { id: 'boolean', schema: booleanInputSchema, component: BooleanInput },
-  { id: 'stringEnum', schema: stringEnumInputSchema, component: StringEnumInput },
-  { id: 'object', schema: objectInputSchema, component: ObjectInput },
-  { id: 'array', schema: arrayInputSchema, component: ArrayInput }
-]
-
-export function usePropSchema() {
-  function resolveInputSchema(schema: PropertyMeta['schema']): { schema: PropertyMeta['schema'], input: any } | undefined {
-    // Return the first input in the list of available inputs that matches the schema.
-    for (const input of availableInputs) {
-      const result = input.schema.safeParse(schema)
-      if (result.success) {
-        // Returns the output from zod to get the transformed output.
-        // It only includes attributes defined in the zod schema.
-        return { schema: result.data as PropertyMeta['schema'], input }
-      }
-    }
-
-    if (typeof schema === 'string') return
-
-    // If the schema is a complex enum or array return the first nested schema that matches an input.
-    if (schema.kind === 'enum' && schema.schema) {
-      const enumSchemas = typeof schema.schema === 'object' ? Object.values(schema.schema) : schema.schema
-      for (const enumSchema of enumSchemas) {
-        const result = resolveInputSchema(enumSchema)
-        if (result) return result
-      }
-    }
-  }
-
-  return { resolveInputSchema }
-}
diff --git a/devtools/app/composables/useShiki.ts b/devtools/app/composables/useShiki.ts
deleted file mode 100644
index 1f55e375..00000000
--- a/devtools/app/composables/useShiki.ts
+++ /dev/null
@@ -1,34 +0,0 @@
-import { createHighlighterCore } from 'shiki/core'
-import type { BuiltinLanguage, HighlighterCore } from 'shiki'
-import MaterialThemeLighter from 'shiki/themes/material-theme-lighter.mjs'
-import MaterialThemePalenight from 'shiki/themes/material-theme-palenight.mjs'
-import VueLang from 'shiki/langs/vue.mjs'
-import MarkdownLang from 'shiki/langs/markdown.mjs'
-import { createOnigurumaEngine } from 'shiki/engine/oniguruma'
-
-export const highlighter = shallowRef<HighlighterCore>()
-
-// A custom composable for syntax highlighting with Shiki since `@nuxt/mdc` relies on
-// a server endpoint to highlight code.
-export function useShiki() {
-  async function codeToHtml(code: string, lang: BuiltinLanguage | 'text' = 'text') {
-    if (!highlighter.value) {
-      highlighter.value = await createHighlighterCore({
-        themes: [MaterialThemeLighter, MaterialThemePalenight],
-        langs: [VueLang, MarkdownLang],
-        engine: createOnigurumaEngine(import('shiki/wasm'))
-      })
-    }
-
-    return highlighter.value.codeToHtml(code, {
-      lang,
-      themes: {
-        dark: 'material-theme-palenight',
-        default: 'material-theme-lighter',
-        light: 'material-theme-lighter'
-      }
-    })
-  }
-
-  return { codeToHtml }
-}
diff --git a/devtools/app/plugins/prettier.client.ts b/devtools/app/plugins/prettier.client.ts
deleted file mode 100644
index 70a0b964..00000000
--- a/devtools/app/plugins/prettier.client.ts
+++ /dev/null
@@ -1,54 +0,0 @@
-import type { Options } from 'prettier'
-import PrettierWorker from '@/workers/prettier.js?worker&inline'
-
-export interface SimplePrettier {
-  format: (source: string, options?: Options) => Promise<string>
-}
-
-function createPrettierWorkerApi(worker: Worker): SimplePrettier {
-  let counter = 0
-  const handlers: any = {}
-
-  worker.addEventListener('message', (event) => {
-    const { uid, message, error } = event.data
-
-    if (!handlers[uid]) {
-      return
-    }
-
-    const [resolve, reject] = handlers[uid]
-    // eslint-disable-next-line @typescript-eslint/no-dynamic-delete
-    delete handlers[uid]
-
-    if (error) {
-      reject(error)
-    } else {
-      resolve(message)
-    }
-  })
-
-  function postMessage<T>(message: any) {
-    const uid = ++counter
-    return new Promise<T>((resolve, reject) => {
-      handlers[uid] = [resolve, reject]
-      worker.postMessage({ uid, message })
-    })
-  }
-
-  return {
-    format(source: string, options?: Options) {
-      return postMessage({ type: 'format', source, options })
-    }
-  }
-}
-
-export default defineNuxtPlugin(async () => {
-  const worker = new PrettierWorker()
-  const prettier = createPrettierWorkerApi(worker)
-
-  return {
-    provide: {
-      prettier
-    }
-  }
-})
diff --git a/devtools/app/workers/prettier.js b/devtools/app/workers/prettier.js
deleted file mode 100644
index a636f1ce..00000000
--- a/devtools/app/workers/prettier.js
+++ /dev/null
@@ -1,36 +0,0 @@
-/* eslint-disable no-undef */
-self.onmessage = async function (event) {
-  self.postMessage({
-    uid: event.data.uid,
-    message: await handleMessage(event.data.message)
-  })
-}
-
-function handleMessage(message) {
-  switch (message.type) {
-    case 'format':
-      return handleFormatMessage(message)
-  }
-}
-
-async function handleFormatMessage(message) {
-  if (!globalThis.prettier) {
-    await Promise.all([
-      import('https://unpkg.com/prettier@3.5.0/standalone.js'),
-      import('https://unpkg.com/prettier@3.5.0/plugins/html.js'),
-      import('https://unpkg.com/prettier@3.5.0/plugins/postcss.js'),
-      import('https://unpkg.com/prettier@3.5.0/plugins/babel.js'),
-      import('https://unpkg.com/prettier@3.5.0/plugins/estree.js'),
-      import('https://unpkg.com/prettier@3.5.0/plugins/typescript.js')
-    ])
-  }
-
-  const { options, source } = message
-  const formatted = await prettier.format(source, {
-    parser: 'vue',
-    plugins: prettierPlugins,
-    ...options
-  })
-
-  return formatted
-}
diff --git a/devtools/nuxt.config.ts b/devtools/nuxt.config.ts
deleted file mode 100644
index a7ef7a41..00000000
--- a/devtools/nuxt.config.ts
+++ /dev/null
@@ -1,38 +0,0 @@
-import { resolve } from 'node:path'
-
-export default defineNuxtConfig({
-
-  modules: ['../src/module', '@nuxt/test-utils/module'],
-
-  ssr: false,
-
-  devtools: { enabled: false },
-
-  app: {
-    baseURL: '/__nuxt_ui__/devtools'
-  },
-
-  future: {
-    compatibilityVersion: 4
-  },
-  compatibilityDate: '2024-04-03',
-
-  nitro: {
-    hooks: {
-      'prerender:routes': function (routes) {
-        routes.clear()
-      }
-    },
-    output: {
-      publicDir: resolve(__dirname, '../dist/client/devtools')
-    }
-  },
-
-  vite: {
-    server: {
-      hmr: {
-        clientPort: process.env.PORT ? +process.env.PORT : undefined
-      }
-    }
-  }
-})
diff --git a/devtools/package.json b/devtools/package.json
deleted file mode 100644
index 64f9cadd..00000000
--- a/devtools/package.json
+++ /dev/null
@@ -1,19 +0,0 @@
-{
-  "name": "@nuxt/ui-devtools",
-  "private": true,
-  "type": "module",
-  "scripts": {
-    "build": "nuxt build",
-    "dev": "nuxt dev",
-    "generate": "nuxt generate",
-    "preview": "nuxt preview",
-    "test": "vitest"
-  },
-  "dependencies": {
-    "@nuxt/ui": "latest",
-    "knitwork": "^1.2.0",
-    "nuxt": "^3.15.4",
-    "prettier": "^3.5.2",
-    "zod": "^3.24.2"
-  }
-}
diff --git a/devtools/public/favicon.svg b/devtools/public/favicon.svg
deleted file mode 100644
index 20be0c71..00000000
--- a/devtools/public/favicon.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg fill="none" xmlns="http://www.w3.org/2000/svg" class="w-auto h-6 shrink-0" viewBox="840 60 180 140"><path d="M958 60.0001H938C933.524 60.0001 929.926 59.9395 927 63C924.074 65.8905 925 67.5792 925 72V141C925 151.372 923.648 156.899 919 162C914.352 166.931 908.468 169 899 169C889.705 169 882.648 166.931 878 162C873.352 156.899 873 151.372 873 141V72.0001C873 67.5793 872.926 65.8906 870 63.0001C867.074 59.9396 863.476 60.0001 859 60.0001H840V141C840 159.023 845.016 173.458 855 184C865.156 194.542 879.893 200 899 200C918.107 200 932.844 194.542 943 184C953.156 173.458 958 159.023 958 141V60.0001Z" fill="currentColor"></path><path fill-rule="evenodd" clip-rule="evenodd" d="M1000 60.0233L1020 60V77L1020 128V156.007L1020 181L1020 189.004C1020 192.938 1019.98 194.429 1017 197.001C1014.02 199.725 1009.56 200 1005 200H986.001V181.006L986 130.012V70.0215C986 66.1576 986.016 64.5494 989 62.023C991.819 59.6358 995.437 60.0233 1000 60.0233Z" fill="currentColor"></path> <style> path { fill: #00000080; } @media (prefers-color-scheme: dark) { path { fill: #ffffff80; } } </style> </svg>
diff --git a/devtools/test/composables/usePropSchema.test.ts b/devtools/test/composables/usePropSchema.test.ts
deleted file mode 100644
index 68c102d4..00000000
--- a/devtools/test/composables/usePropSchema.test.ts
+++ /dev/null
@@ -1,24 +0,0 @@
-// @vitest-environment node
-import { it, expect, describe } from 'vitest'
-import { usePropSchema } from '../../app/composables/usePropSchema'
-import { stringSchema, optionalStringSchema, booleanSchema, numberSchema, optionalNumberSchema, optionalBooleanSchema, objectSchema, arraySchema, arrayOptionalSchema, stringEnumSchema } from '../fixtures/schemas'
-
-describe('usePropSchema', () => {
-  const { resolveInputSchema } = usePropSchema()
-
-  it.each([
-    ['string', { schema: stringSchema, inputId: 'string' }],
-    ['optional string', { schema: optionalStringSchema, inputId: 'string' }],
-    ['number', { schema: numberSchema, inputId: 'number' }],
-    ['optional number', { schema: optionalNumberSchema, inputId: 'number' }],
-    ['boolean', { schema: booleanSchema, inputId: 'boolean' }],
-    ['string enum', { schema: stringEnumSchema, inputId: 'stringEnum' }],
-    ['object', { schema: objectSchema, inputId: 'object' }],
-    ['optional boolean', { schema: optionalBooleanSchema, inputId: 'boolean' }],
-    ['array', { schema: arraySchema, inputId: 'array' }],
-    ['optional array', { schema: arrayOptionalSchema, inputId: 'array' }]
-  ])('resolveInputSchema should resolve %s schema', async (_: string, options) => {
-    const result = resolveInputSchema(options.schema as any)
-    expect(result?.input.id).toBe(options.inputId)
-  })
-})
diff --git a/devtools/test/fixtures/schemas.ts b/devtools/test/fixtures/schemas.ts
deleted file mode 100644
index bc33a14e..00000000
--- a/devtools/test/fixtures/schemas.ts
+++ /dev/null
@@ -1,133 +0,0 @@
-export const stringSchema = 'string' as const
-
-export const optionalStringSchema = {
-  kind: 'enum',
-  type: 'string | undefined',
-  schema: {
-    0: 'undefined',
-    1: 'string'
-  }
-}
-
-export const numberSchema = 'number' as const
-export const optionalNumberSchema = {
-  kind: 'enum',
-  type: 'number | undefined',
-  schema: {
-    0: 'undefined',
-    1: 'number'
-  }
-}
-
-export const booleanSchema = 'boolean' as const
-export const optionalBooleanSchema = {
-  kind: 'enum',
-  type: 'boolean | undefined',
-  schema: {
-    0: 'undefined',
-    1: 'boolean'
-  }
-}
-
-export const objectSchema = {
-  kind: 'object',
-  type: 'AccordionItem',
-  schema: {
-    label: {
-      name: 'label',
-      global: false,
-      description: '',
-      tags: [],
-      required: false,
-      type: 'string | undefined',
-      schema: {
-        kind: 'enum',
-        type: 'string | undefined',
-        schema: {
-          0: 'undefined',
-          1: 'string'
-        }
-      }
-    }
-  }
-}
-
-export const arraySchema = {
-  kind: 'array',
-  type: 'AccordionItem[]',
-  schema: [
-    {
-      kind: 'object',
-      type: 'AccordionItem',
-      schema: {
-        label: {
-          name: 'label',
-          global: false,
-          description: '',
-          tags: [],
-          required: false,
-          type: 'string | undefined',
-          schema: {
-            kind: 'enum',
-            type: 'string | undefined',
-            schema: {
-              0: 'undefined',
-              1: 'string'
-            }
-          }
-        }
-      }
-    }
-  ]
-}
-
-export const arrayOptionalSchema = {
-  kind: 'enum',
-  type: 'AccordionItem[] | undefined',
-  schema: {
-    0: 'undefined',
-    1: {
-      kind: 'array',
-      type: 'AccordionItem[]',
-      schema: [
-        {
-          kind: 'object',
-          type: 'AccordionItem',
-          schema: {
-            label: {
-              name: 'label',
-              global: false,
-              description: '',
-              tags: [],
-              required: false,
-              type: 'string | undefined',
-              schema: {
-                kind: 'enum',
-                type: 'string | undefined',
-                schema: {
-                  0: 'undefined',
-                  1: 'string'
-                }
-              }
-            }
-          }
-        }
-      ]
-    }
-  }
-}
-
-export const stringEnumSchema = {
-  kind: 'enum',
-  type: '"true" | "false" | "page" | "step" | "location" | "date" | "time" | undefined',
-  schema: {
-    0: 'undefined',
-    1: '"true"',
-    2: '"false"',
-    3: '"page"',
-    4: '"step"',
-    5: '"location"',
-    6: '"date"',
-    7: '"time"'
-  }
-}
diff --git a/devtools/test/vitest.config.ts b/devtools/test/vitest.config.ts
deleted file mode 100644
index d297d232..00000000
--- a/devtools/test/vitest.config.ts
+++ /dev/null
@@ -1,7 +0,0 @@
-import { defineVitestConfig } from '@nuxt/test-utils/config'
-
-export default defineVitestConfig({
-  test: {
-    environment: 'nuxt'
-  }
-})
diff --git a/devtools/tsconfig.json b/devtools/tsconfig.json
deleted file mode 100644
index a746f2a7..00000000
--- a/devtools/tsconfig.json
+++ /dev/null
@@ -1,4 +0,0 @@
-{
-  // https://nuxt.com/docs/guide/concepts/typescript
-  "extends": "./.nuxt/tsconfig.json"
-}
diff --git a/docs/app/composables/useLinks.ts b/docs/app/composables/useLinks.ts
index 6eb79e32..b4e377c4 100644
--- a/docs/app/composables/useLinks.ts
+++ b/docs/app/composables/useLinks.ts
@@ -78,12 +78,35 @@ export function useLinks() {
     }]
   }, {
     label: 'Figma',
-    icon: 'i-lucide-figma',
+    icon: 'i-simple-icons-figma',
     to: '/figma'
   }, {
-    label: 'Roadmap',
-    icon: 'i-lucide-map',
-    to: '/roadmap'
+    label: 'Community',
+    icon: 'i-lucide-users',
+    children: [{
+      label: 'Roadmap',
+      description: 'Track our development progress in real-time.',
+      icon: 'i-lucide-map',
+      to: '/roadmap'
+    }, {
+      label: 'Devtools Integration',
+      description: 'Integrate Nuxt UI with Nuxt Devtools with Compodium.',
+      icon: 'i-lucide-code',
+      to: 'https://github.com/romhml/compodium',
+      target: '_blank'
+    }, {
+      label: 'Raycast Extension',
+      description: 'Access Nuxt UI components without leaving your editor.',
+      icon: 'i-simple-icons-raycast',
+      to: 'https://github.com/HugoRCD/nuxt-ui-raycast-extension',
+      target: '_blank'
+    }, {
+      label: 'Figma to Code',
+      description: 'Convert Figma designs to Nuxt UI code.',
+      icon: 'i-simple-icons-figma',
+      to: 'https://github.com/Justineo/tempad-dev-plugin-nuxt-ui',
+      target: '_blank'
+    }]
   }, {
     label: 'Releases',
     icon: 'i-lucide-rocket',
diff --git a/docs/content/1.getting-started/1.index.md b/docs/content/1.getting-started/1.index.md
index fb0b8db5..97b991f8 100644
--- a/docs/content/1.getting-started/1.index.md
+++ b/docs/content/1.getting-started/1.index.md
@@ -79,16 +79,24 @@ Learn how to install and configure Nuxt UI in a Vue project in the **Vue install
 
 ### Nuxt DevTools Integration
 
-Nuxt UI is deeply integrated with Nuxt Devtools, providing a powerful development experience:
+You can play with Nuxt UI components as well as your app components directly from Nuxt Devtools with the [compodium](https://github.com/romhml/compodium) module, providing a powerful development experience:
 
 - **Component Inspector**: Inspect and analyze Nuxt UI components in real-time
 - **Live Preview**: Modify component props and see changes instantly
 - **Code Generation**: Get the corresponding code for your component configurations
 
-::video{poster="https://res.cloudinary.com/nuxt/video/upload/so_0/v1736788078/nuxt-ui/nuxt-ui3-devtools_wbmgmc.jpg" controls class="w-full h-auto rounded"}
-  :source{src="https://res.cloudinary.com/nuxt/video/upload/v1736788078/nuxt-ui/nuxt-ui3-devtools_wbmgmc.webm" type="video/webm"}
-  :source{src="https://res.cloudinary.com/nuxt/video/upload/v1736788078/nuxt-ui/nuxt-ui3-devtools_wbmgmc.mp4" type="video/mp4"}
-  :source{src="https://res.cloudinary.com/nuxt/video/upload/v1736788078/nuxt-ui/nuxt-ui3-devtools_wbmgmc.ogg" type="video/ogg"}
+::note
+Install the module to your Nuxt application with one command:
+
+```bash [Terminal]
+npx nuxi module add compodium
+```
+::
+
+::video{poster="https://res.cloudinary.com/nuxt/video/upload/so_0/v1740751953/nuxt-ui/nuxt-compodium_y2bvqw.jpg" controls class="w-full h-auto rounded"}
+  :source{src="https://res.cloudinary.com/nuxt/video/upload/v1740751953/nuxt-ui/nuxt-compodium_y2bvqw.webm" type="video/webm"}
+  :source{src="https://res.cloudinary.com/nuxt/video/upload/v1740751953/nuxt-ui/nuxt-compodium_y2bvqw.mp4" type="video/mp4"}
+  :source{src="https://res.cloudinary.com/nuxt/video/upload/v1740751953/nuxt-ui/nuxt-compodium_y2bvqw.ogg" type="video/ogg"}
 ::
 
 ## Migration
diff --git a/docs/content/1.getting-started/2.installation/1.nuxt.md b/docs/content/1.getting-started/2.installation/1.nuxt.md
index 4382685a..eaea3920 100644
--- a/docs/content/1.getting-started/2.installation/1.nuxt.md
+++ b/docs/content/1.getting-started/2.installation/1.nuxt.md
@@ -219,23 +219,6 @@ export default defineNuxtConfig({
 This option adds the `transition-colors` class on components with hover or active states.
 ::
 
-### `devtools.enabled`
-
-Use the `devtools.enabled` option to enable or disable the Nuxt UI devtools.
-
-- Default: `true`{lang="ts-type"}
-
-```ts [nuxt.config.ts]
-export default defineNuxtConfig({
-  modules: ['@nuxt/ui'],
-  ui: {
-    devtools: {
-      enabled: false
-    }
-  }
-})
-```
-
 ## Continuous Releases
 
 Nuxt UI v3 uses [pkg.pr.new](https://github.com/stackblitz-labs/pkg.pr.new) for continuous preview releases, providing developers with instant access to the latest features and bug fixes without waiting for official releases.
diff --git a/docs/content/1.getting-started/contribution.md b/docs/content/1.getting-started/contribution.md
index ebb7d992..ff9240a3 100644
--- a/docs/content/1.getting-started/contribution.md
+++ b/docs/content/1.getting-started/contribution.md
@@ -37,7 +37,6 @@ The documentation lives in the `docs` folder as a Nuxt app using `@nuxt/content`
 The module code resides in the `src` folder. Here's a breakdown of its structure:
 
 ```bash
-├── devtools/
 ├── plugins/
 ├── runtime/
 │   ├── components/        # Where all the components are located
diff --git a/docs/nuxt.config.ts b/docs/nuxt.config.ts
index db5c09d5..8b3bdc76 100644
--- a/docs/nuxt.config.ts
+++ b/docs/nuxt.config.ts
@@ -38,7 +38,9 @@ export default defineNuxtConfig({
     }
   },
 
-  devtools: { enabled: true },
+  devtools: {
+    enabled: true
+  },
 
   app: {
     head: {
diff --git a/eslint.config.mjs b/eslint.config.mjs
index 41fe1a28..7844e440 100644
--- a/eslint.config.mjs
+++ b/eslint.config.mjs
@@ -16,6 +16,4 @@ export default createConfigForNuxt({
   '@typescript-eslint/ban-types': 'off',
   '@typescript-eslint/no-empty-object-type': 'off',
   '@typescript-eslint/no-explicit-any': 'off'
-}).prepend({
-  ignores: ['src/devtools/.component-meta']
 })
diff --git a/package.json b/package.json
index d7ec9c8d..7aa82e54 100644
--- a/package.json
+++ b/package.json
@@ -58,21 +58,18 @@
     "vue-plugin.d.ts"
   ],
   "scripts": {
-    "build": "nuxt-module-build build && pnpm devtools:build",
+    "build": "nuxt-module-build build",
     "prepack": "pnpm build",
     "dev": "DEV=true nuxi dev playground",
     "dev:vue": "DEV=true vite playground-vue",
     "dev:build": "nuxi build playground",
-    "dev:prepare": "nuxt-module-build build --stub && nuxt-module-build prepare && nuxi prepare playground && nuxi prepare docs && nuxi prepare devtools && vite build playground-vue",
-    "devtools": "NUXT_UI_DEVTOOLS_LOCAL=true nuxi dev playground",
-    "devtools:build": "nuxi generate devtools",
-    "devtools:prepare": "DEVTOOLS=true nuxt-component-meta playground --outputDir ../src/devtools/.component-meta/",
+    "dev:prepare": "nuxt-module-build build --stub && nuxt-module-build prepare && nuxi prepare playground && nuxi prepare docs && vite build playground-vue",
     "docs": "DEV=true nuxi dev docs",
     "docs:build": "nuxi build docs",
     "docs:prepare": "nuxt-component-meta docs",
     "lint": "eslint .",
     "lint:fix": "eslint . --fix",
-    "typecheck": "vue-tsc --noEmit && nuxi typecheck playground && nuxi typecheck docs && nuxi typecheck devtools && cd playground-vue && vue-tsc --noEmit",
+    "typecheck": "vue-tsc --noEmit && nuxi typecheck playground && nuxi typecheck docs && cd playground-vue && vue-tsc --noEmit",
     "test": "vitest",
     "test:vue": "vitest -c vitest.vue.config.ts",
     "test:vue:build": "vite build playground-vue",
@@ -82,7 +79,6 @@
     "@iconify/vue": "^4.3.0",
     "@internationalized/date": "^3.7.0",
     "@internationalized/number": "^3.6.0",
-    "@nuxt/devtools-kit": "^2.1.0",
     "@nuxt/fonts": "^0.10.3",
     "@nuxt/icon": "^1.10.3",
     "@nuxt/kit": "^3.15.4",
@@ -105,7 +101,6 @@
     "embla-carousel-vue": "^8.5.2",
     "embla-carousel-wheel-gestures": "^8.0.1",
     "fuse.js": "^7.1.0",
-    "get-port-please": "^3.1.2",
     "knitwork": "^1.2.0",
     "magic-string": "^0.30.17",
     "mlly": "^1.7.4",
@@ -113,7 +108,6 @@
     "pathe": "^2.0.3",
     "reka-ui": "^2.0.0",
     "scule": "^1.3.0",
-    "sirv": "^3.0.1",
     "tailwind-variants": "^0.3.1",
     "tailwindcss": "^4.0.9",
     "tinyglobby": "^0.2.12",
@@ -133,9 +127,7 @@
     "eslint": "^9.21.0",
     "happy-dom": "^17.1.2",
     "joi": "^17.13.3",
-    "knitwork": "^1.2.0",
     "nuxt": "^3.15.4",
-    "nuxt-component-meta": "^0.10.0",
     "release-it": "^18.1.2",
     "superstruct": "^2.0.2",
     "valibot": "^0.42.1",
diff --git a/playground/nuxt.config.ts b/playground/nuxt.config.ts
index 571cc6cc..da045551 100644
--- a/playground/nuxt.config.ts
+++ b/playground/nuxt.config.ts
@@ -1,7 +1,3 @@
-import { createResolver } from '@nuxt/kit'
-
-const { resolve } = createResolver(import.meta.url)
-
 export default defineNuxtConfig({
   modules: [
     '../src/module',
@@ -14,27 +10,9 @@ export default defineNuxtConfig({
 
   css: ['~/assets/css/main.css'],
 
-  ui: {
-    fonts: !process.env.DEVTOOLS
-  },
-
   future: {
     compatibilityVersion: 4
   },
 
-  compatibilityDate: '2024-07-09',
-
-  // @ts-expect-error - `nuxt-component-meta` is used as CLI
-  componentMeta: {
-    exclude: [
-      resolve('./app/components')
-    ],
-    metaFields: {
-      type: false,
-      props: true,
-      slots: true,
-      events: false,
-      exposed: false
-    }
-  }
+  compatibilityDate: '2024-07-09'
 })
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 76d8fef2..e4031f98 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -29,9 +29,6 @@ importers:
       '@internationalized/number':
         specifier: ^3.6.0
         version: 3.6.0
-      '@nuxt/devtools-kit':
-        specifier: ^2.1.0
-        version: 2.1.0(magicast@0.3.5)(rollup@4.32.1)(vite@6.2.0(@types/node@22.13.5)(jiti@2.4.2)(lightningcss@1.29.1)(terser@5.39.0)(yaml@2.7.0))
       '@nuxt/fonts':
         specifier: ^0.10.3
         version: 0.10.3(db0@0.2.4(better-sqlite3@11.8.1))(ioredis@5.5.0)(magicast@0.3.5)(rollup@4.32.1)(vite@6.2.0(@types/node@22.13.5)(jiti@2.4.2)(lightningcss@1.29.1)(terser@5.39.0)(yaml@2.7.0))
@@ -98,9 +95,6 @@ importers:
       fuse.js:
         specifier: ^7.1.0
         version: 7.1.0
-      get-port-please:
-        specifier: ^3.1.2
-        version: 3.1.2
       knitwork:
         specifier: ^1.2.0
         version: 1.2.0
@@ -122,9 +116,6 @@ importers:
       scule:
         specifier: ^1.3.0
         version: 1.3.0
-      sirv:
-        specifier: ^3.0.1
-        version: 3.0.1
       tailwind-variants:
         specifier: ^0.3.1
         version: 0.3.1(tailwindcss@4.0.9)
@@ -183,9 +174,6 @@ importers:
       nuxt:
         specifier: ^3.15.4
         version: 3.15.4(@parcel/watcher@2.5.1)(@types/node@22.13.5)(better-sqlite3@11.8.1)(db0@0.2.4(better-sqlite3@11.8.1))(eslint@9.21.0(jiti@2.4.2))(ioredis@5.5.0)(lightningcss@1.29.1)(magicast@0.3.5)(optionator@0.9.4)(rollup@4.32.1)(terser@5.39.0)(typescript@5.6.3)(vite@6.2.0(@types/node@22.13.5)(jiti@2.4.2)(lightningcss@1.29.1)(terser@5.39.0)(yaml@2.7.0))(vue-tsc@2.2.0(typescript@5.6.3))(yaml@2.7.0)
-      nuxt-component-meta:
-        specifier: ^0.10.0
-        version: 0.10.0(magicast@0.3.5)(rollup@4.32.1)
       release-it:
         specifier: ^18.1.2
         version: 18.1.2(@types/node@22.13.5)(typescript@5.6.3)
@@ -226,24 +214,6 @@ importers:
         specifier: ^1.3.0
         version: 1.3.0
 
-  devtools:
-    dependencies:
-      '@nuxt/ui':
-        specifier: workspace:*
-        version: link:..
-      knitwork:
-        specifier: ^1.2.0
-        version: 1.2.0
-      nuxt:
-        specifier: ^3.15.4
-        version: 3.15.4(@parcel/watcher@2.5.1)(@types/node@22.13.5)(better-sqlite3@11.8.1)(db0@0.2.4(better-sqlite3@11.8.1))(eslint@9.21.0(jiti@2.4.2))(ioredis@5.5.0)(lightningcss@1.29.1)(magicast@0.3.5)(optionator@0.9.4)(rollup@4.32.1)(terser@5.39.0)(typescript@5.6.3)(vite@6.2.0(@types/node@22.13.5)(jiti@2.4.2)(lightningcss@1.29.1)(terser@5.39.0)(yaml@2.7.0))(vue-tsc@2.2.0(typescript@5.6.3))(yaml@2.7.0)
-      prettier:
-        specifier: ^3.5.2
-        version: 3.5.2
-      zod:
-        specifier: ^3.24.2
-        version: 3.24.2
-
   docs:
     dependencies:
       '@iconify-json/logos':
diff --git a/pnpm-workspace.yaml b/pnpm-workspace.yaml
index 84024be0..7dd585fd 100644
--- a/pnpm-workspace.yaml
+++ b/pnpm-workspace.yaml
@@ -2,6 +2,5 @@ packages:
   - "./"
   - "cli"
   - "docs"
-  - "devtools"
   - "playground"
   - "playground-vue"
diff --git a/src/defaults.ts b/src/defaults.ts
index ccc44df7..0a88d6a6 100644
--- a/src/defaults.ts
+++ b/src/defaults.ts
@@ -22,9 +22,6 @@ export const defaultOptions = {
   theme: {
     colors: undefined,
     transitions: true
-  },
-  devtools: {
-    enabled: true
   }
 }
 
diff --git a/src/devtools/meta.ts b/src/devtools/meta.ts
deleted file mode 100644
index abe21e28..00000000
--- a/src/devtools/meta.ts
+++ /dev/null
@@ -1,148 +0,0 @@
-import type { ViteDevServer } from 'vite'
-import { kebabCase, camelCase } from 'scule'
-import defu from 'defu'
-import fs from 'node:fs'
-import type { Resolver } from '@nuxt/kit'
-import type { ComponentMeta } from 'vue-component-meta'
-import type { DevtoolsMeta } from '../runtime/composables/extendDevtoolsMeta'
-import type { ModuleOptions } from '../module'
-
-export type Component = {
-  slug: string
-  label: string
-  meta?: ComponentMeta & { devtools: DevtoolsMeta<any> }
-  defaultVariants: Record<string, any>
-}
-
-const devtoolsComponentMeta: Record<string, any> = {}
-
-function extractDevtoolsMeta(code: string): string | null {
-  const match = code.match(/extendDevtoolsMeta(?:<.*?>)?\(/)
-  if (!match) return null
-
-  const startIndex = code.indexOf(match[0]) + match[0].length
-  let openBraceCount = 0
-  let closeBraceCount = 0
-  let endIndex = startIndex
-
-  for (let i = startIndex; i < code.length; i++) {
-    if (code[i] === '{') openBraceCount++
-    if (code[i] === '}') closeBraceCount++
-
-    if (openBraceCount > 0 && openBraceCount === closeBraceCount) {
-      endIndex = i + 1
-      break
-    }
-  }
-  // Return only the object inside extendDevtoolsMeta
-  return code.slice(startIndex, endIndex).trim()
-}
-
-// A Plugin to parse additional metadata for the Nuxt UI Devtools.
-export function devtoolsMetaPlugin({ resolve, options, templates }: { resolve: Resolver['resolve'], options: ModuleOptions, templates: Record<string, any> }) {
-  return {
-    name: 'ui-devtools-component-meta',
-    enforce: 'pre' as const,
-
-    async transform(code: string, id: string) {
-      if (!id.match(/\/runtime\/components\/\w+.vue/)) return
-      const fileName = id.split('/')[id.split('/').length - 1]
-
-      if (code && fileName) {
-        const slug = kebabCase(fileName.replace(/\..*/, ''))
-        const match = extractDevtoolsMeta(code)
-
-        if (match) {
-          const metaObject = new Function(`return ${match}`)()
-          devtoolsComponentMeta[slug] = { meta: { devtools: { ...metaObject } } }
-        }
-      }
-
-      return {
-        code
-      }
-    },
-
-    configureServer(server: ViteDevServer) {
-      server.middlewares.use('/__nuxt_ui__/devtools/api/component-meta', async (_req, res) => {
-        res.setHeader('Content-Type', 'application/json')
-        try {
-          const componentMeta = await import('./.component-meta/component-meta')
-
-          const meta = defu(
-            Object.entries(componentMeta.default).reduce((acc, [key, value]: [string, any]) => {
-              if (!key.startsWith('U')) return acc
-
-              const name = key.substring(1)
-              const slug = kebabCase(name)
-              const template = templates?.[camelCase(name)]
-
-              if (devtoolsComponentMeta[slug] === undefined) {
-                const path = resolve(`./runtime/components/${name}.vue`)
-                const code = fs.readFileSync(path, 'utf-8')
-                const match = extractDevtoolsMeta(code)
-                if (match) {
-                  const metaObject = new Function(`return ${match}`)()
-                  devtoolsComponentMeta[slug] = { meta: { devtools: { ...metaObject } } }
-                } else {
-                  devtoolsComponentMeta[slug] = null
-                }
-              }
-
-              value.meta.props = value.meta.props.map((prop: any) => {
-                let defaultValue = prop.default
-                  ? prop.default
-                  : prop?.tags?.find((tag: any) =>
-                    tag.name === 'defaultValue'
-                    && !tag.text?.includes('appConfig'))?.text
-                    ?? template?.defaultVariants?.[prop.name]
-
-                if (typeof defaultValue === 'string') defaultValue = defaultValue?.replace(/\s+as\s+\w+$/g, '').replaceAll(/["'`]/g, '')
-                if (defaultValue === 'true') defaultValue = true
-                if (defaultValue === 'false') defaultValue = false
-                if (!Number.isNaN(Number.parseInt(defaultValue))) defaultValue = Number.parseInt(defaultValue)
-
-                return {
-                  ...prop,
-                  default: defaultValue
-                }
-              })
-
-              const label = key.replace(/^U/, options.prefix ?? 'U')
-              acc[kebabCase(key.replace(/^U/, ''))] = { ...value, label, slug }
-              return acc
-            }, {} as Record<string, any>),
-            devtoolsComponentMeta
-          )
-          res.end(JSON.stringify(meta))
-        } catch (error) {
-          console.error(`Failed to fetch component meta`, error)
-          res.statusCode = 500
-          res.end(JSON.stringify({ error: 'Failed to fetch component meta' }))
-        }
-      })
-
-      server.middlewares.use('/__nuxt_ui__/devtools/api/component-example', async (req, res) => {
-        const query = new URL(req.url!, 'http://localhost').searchParams
-        const name = query.get('component')
-        if (!name) {
-          res.statusCode = 400
-          res.end(JSON.stringify({ error: 'Component name is required' }))
-          return
-        }
-
-        try {
-          const path = resolve(`./devtools/runtime/examples/${name}.vue`)
-          const source = fs.readFileSync(path, 'utf-8')
-
-          res.setHeader('Content-Type', 'application/json')
-          res.end(JSON.stringify({ component: name, source }))
-        } catch (error) {
-          console.error(`Failed to read component source for ${name}:`, error)
-          res.statusCode = 500
-          res.end(JSON.stringify({ error: 'Failed to read component source' }))
-        }
-      })
-    }
-  }
-}
diff --git a/src/devtools/runtime/DevtoolsRenderer.vue b/src/devtools/runtime/DevtoolsRenderer.vue
deleted file mode 100644
index 719a840b..00000000
--- a/src/devtools/runtime/DevtoolsRenderer.vue
+++ /dev/null
@@ -1,72 +0,0 @@
-<script setup lang="ts">
-import { onUnmounted, onMounted, reactive } from 'vue'
-import { pascalCase } from 'scule'
-import { defineAsyncComponent, useRoute } from '#imports'
-import { useColorMode } from '@vueuse/core'
-
-const route = useRoute()
-const component = route.query?.example
-  ? defineAsyncComponent(() => import(`./examples/${route.query.example}.vue`))
-  : route.params?.slug && defineAsyncComponent(() => import(`../../runtime/components/${pascalCase(route.params.slug as string)}.vue`))
-
-const state = reactive<{ slots?: any, props?: any }>({})
-
-function onUpdateRenderer(event: Event & { data?: any }) {
-  state.props = { ...event.data.props }
-  state.slots = { ...event.data.slots }
-}
-
-const mode = useColorMode()
-function setColorMode(event: Event & { isDark?: boolean }) {
-  mode.value = event.isDark ? 'dark' : 'light'
-}
-
-onMounted(() => {
-  window.parent.addEventListener('nuxt-ui-devtools:update-renderer', onUpdateRenderer)
-  window.parent.addEventListener('nuxt-ui-devtools:set-color-mode', setColorMode)
-})
-
-onUnmounted(() => {
-  window.parent.removeEventListener('nuxt-ui-devtools:update-renderer', onUpdateRenderer)
-  window.parent.removeEventListener('nuxt-ui-devtools:set-color-mode', setColorMode)
-})
-
-onMounted(async () => {
-  const event: Event = new Event('nuxt-ui-devtools:component-loaded')
-  window.parent.dispatchEvent(event)
-})
-
-onMounted(() => {
-  if (!route.query?.example) return
-})
-</script>
-
-<template>
-  <div id="ui-devtools-renderer" class="nuxt-ui-component-renderer">
-    <UApp :toaster="null">
-      <component :is="component" v-if="component" v-bind="state.props" :class="state?.slots?.base" :ui="state.slots" />
-    </UApp>
-  </div>
-</template>
-
-<style>
-.nuxt-ui-component-renderer {
-  position: 'relative';
-  height: 100vh;
-  width: 100vw;
-
-  padding: 32px;
-
-  display: flex;
-  justify-content: center;
-  align-items: center;
-
-  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' transform='scale(3)'%3E%3Crect width='100%25' height='100%25' fill='%23fff'/%3E%3Cpath fill='none' stroke='hsla(0, 0%25, 98%25, 1)' stroke-width='.2' d='M10 0v20ZM0 10h20Z'/%3E%3C/svg%3E");
-  background-size: 40px 40px;
-}
-
-.dark .nuxt-ui-component-renderer {
-background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' transform='scale(3)'%3E%3Crect width='100%25' height='100%25' fill='hsl(0, 0%25, 8.5%25)'/%3E%3Cpath fill='none' stroke='hsl(0, 0%25, 11.0%25)' stroke-width='.2' d='M10 0v20ZM0 10h20Z'/%3E%3C/svg%3E");
-  background-size: 40px 40px;
-}
-</style>
diff --git a/src/devtools/runtime/examples/AvatarGroupExample.vue b/src/devtools/runtime/examples/AvatarGroupExample.vue
deleted file mode 100644
index 805b964a..00000000
--- a/src/devtools/runtime/examples/AvatarGroupExample.vue
+++ /dev/null
@@ -1,7 +0,0 @@
-<template>
-  <UAvatarGroup>
-    <UAvatar src="https://github.com/benjamincanac.png" alt="Benjamin Canac" />
-    <UAvatar src="https://github.com/romhml.png" alt="Romain Hamel" />
-    <UAvatar src="https://github.com/noook.png" alt="Neil Richter" />
-  </UAvatarGroup>
-</template>
diff --git a/src/devtools/runtime/examples/ButtonGroupExample.vue b/src/devtools/runtime/examples/ButtonGroupExample.vue
deleted file mode 100644
index 54d04c97..00000000
--- a/src/devtools/runtime/examples/ButtonGroupExample.vue
+++ /dev/null
@@ -1,8 +0,0 @@
-<template>
-  <UButtonGroup>
-    <UInput placeholder="Search..." />
-    <UButton color="neutral" variant="outline">
-      Button
-    </UButton>
-  </UButtonGroup>
-</template>
diff --git a/src/devtools/runtime/examples/CardExample.vue b/src/devtools/runtime/examples/CardExample.vue
deleted file mode 100644
index dbffb692..00000000
--- a/src/devtools/runtime/examples/CardExample.vue
+++ /dev/null
@@ -1,13 +0,0 @@
-<template>
-  <div class="flex flex-col gap-4">
-    <UCard class="w-96">
-      <template #header>
-        <div class="bg-(--ui-bg-accented)/40 h-8" />
-      </template>
-      <div class="bg-(--ui-bg-accented)/40 h-32" />
-      <template #footer>
-        <div class="bg-(--ui-bg-accented)/40 h-8" />
-      </template>
-    </UCard>
-  </div>
-</template>
diff --git a/src/devtools/runtime/examples/CarouselExample.vue b/src/devtools/runtime/examples/CarouselExample.vue
deleted file mode 100644
index f038abd5..00000000
--- a/src/devtools/runtime/examples/CarouselExample.vue
+++ /dev/null
@@ -1,13 +0,0 @@
-<template>
-  <UCarousel
-    v-slot="{ item }"
-    class="basis-1/3"
-    :items="[
-      'https://picsum.photos/320/320?v=1',
-      'https://picsum.photos/320/320?v=2',
-      'https://picsum.photos/320/320?v=3'
-    ]"
-  >
-    <img :src="item" class="rounded-lg basis-1/3">
-  </UCarousel>
-</template>
diff --git a/src/devtools/runtime/examples/ChipExample.vue b/src/devtools/runtime/examples/ChipExample.vue
deleted file mode 100644
index c0c05fdc..00000000
--- a/src/devtools/runtime/examples/ChipExample.vue
+++ /dev/null
@@ -1,5 +0,0 @@
-<template>
-  <UChip>
-    <UAvatar src="https://avatars.githubusercontent.com/u/739984?v=4" />
-  </UChip>
-</template>
diff --git a/src/devtools/runtime/examples/CollapsibleExample.vue b/src/devtools/runtime/examples/CollapsibleExample.vue
deleted file mode 100644
index 48d7251a..00000000
--- a/src/devtools/runtime/examples/CollapsibleExample.vue
+++ /dev/null
@@ -1,8 +0,0 @@
-<template>
-  <UCollapsible class="w-48">
-    <UButton label="Open Collapse" block />
-    <template #content>
-      <div class="bg-(--ui-bg-accented)/40 h-60" />
-    </template>
-  </UCollapsible>
-</template>
diff --git a/src/devtools/runtime/examples/CommandPaletteExample.vue b/src/devtools/runtime/examples/CommandPaletteExample.vue
deleted file mode 100644
index 1ac15634..00000000
--- a/src/devtools/runtime/examples/CommandPaletteExample.vue
+++ /dev/null
@@ -1,29 +0,0 @@
-<script setup lang="ts">
-const groups = [{
-  id: 'actions',
-  items: [{
-    label: 'Add new file',
-    suffix: 'Create a new file in the current directory or workspace.',
-    icon: 'i-lucide-file-plus'
-  }, {
-    label: 'Add new folder',
-    suffix: 'Create a new folder in the current directory or workspace.',
-    icon: 'i-lucide-folder-plus',
-    kbds: ['meta', 'F']
-  }, {
-    label: 'Add hashtag',
-    suffix: 'Add a hashtag to the current item.',
-    icon: 'i-lucide-hash',
-    kbds: ['meta', 'H']
-  }, {
-    label: 'Add label',
-    suffix: 'Add a label to the current item.',
-    icon: 'i-lucide-tag',
-    kbds: ['meta', 'L']
-  }]
-}]
-</script>
-
-<template>
-  <UCommandPalette :groups="groups" />
-</template>
diff --git a/src/devtools/runtime/examples/ContainerExample.vue b/src/devtools/runtime/examples/ContainerExample.vue
deleted file mode 100644
index da04c08e..00000000
--- a/src/devtools/runtime/examples/ContainerExample.vue
+++ /dev/null
@@ -1,5 +0,0 @@
-<template>
-  <UContainer>
-    <div class="bg-(--ui-bg-accented)/40 h-60 aspect-video w-72" />
-  </UContainer>
-</template>
diff --git a/src/devtools/runtime/examples/ContextMenuExample.vue b/src/devtools/runtime/examples/ContextMenuExample.vue
deleted file mode 100644
index 0a1d00ae..00000000
--- a/src/devtools/runtime/examples/ContextMenuExample.vue
+++ /dev/null
@@ -1,5 +0,0 @@
-<template>
-  <UContextMenu>
-    <div class="bg-(--ui-bg-accented)/40 h-60 w-72" />
-  </UContextMenu>
-</template>
diff --git a/src/devtools/runtime/examples/DrawerExample.vue b/src/devtools/runtime/examples/DrawerExample.vue
deleted file mode 100644
index 125804e6..00000000
--- a/src/devtools/runtime/examples/DrawerExample.vue
+++ /dev/null
@@ -1,8 +0,0 @@
-<template>
-  <UDrawer>
-    <UButton label="Open Drawer" />
-    <template #body>
-      <div class="size-96" />
-    </template>
-  </UDrawer>
-</template>
diff --git a/src/devtools/runtime/examples/DropdownMenuExample.vue b/src/devtools/runtime/examples/DropdownMenuExample.vue
deleted file mode 100644
index 49cc937e..00000000
--- a/src/devtools/runtime/examples/DropdownMenuExample.vue
+++ /dev/null
@@ -1,5 +0,0 @@
-<template>
-  <UDropdownMenu>
-    <UButton label="Open Dropdown" />
-  </UDropdownMenu>
-</template>
diff --git a/src/devtools/runtime/examples/FormExample.vue b/src/devtools/runtime/examples/FormExample.vue
deleted file mode 100644
index 199afddd..00000000
--- a/src/devtools/runtime/examples/FormExample.vue
+++ /dev/null
@@ -1,30 +0,0 @@
-<script setup lang="ts">
-import { reactive } from 'vue'
-
-const state = reactive({ email: undefined, password: undefined })
-
-function validate(data: Partial<typeof state>) {
-  const errors: Array<{ name: string, message: string }> = []
-  if (!data.email) errors.push({ name: 'email', message: 'Required' })
-  if (!data.password) errors.push({ name: 'password', message: 'Required' })
-  return errors
-}
-</script>
-
-<template>
-  <UForm
-    :validate="validate"
-    :state="state"
-    class="space-y-4"
-  >
-    <UFormField name="email" label="Email">
-      <UInput v-model="state.email" />
-    </UFormField>
-    <UFormField name="password" label="Password">
-      <UInput v-model="state.password" />
-    </UFormField>
-    <UButton type="submit">
-      Submit
-    </UButton>
-  </UForm>
-</template>
diff --git a/src/devtools/runtime/examples/FormFieldExample.vue b/src/devtools/runtime/examples/FormFieldExample.vue
deleted file mode 100644
index a0be07b1..00000000
--- a/src/devtools/runtime/examples/FormFieldExample.vue
+++ /dev/null
@@ -1,5 +0,0 @@
-<template>
-  <UFormField>
-    <UInput />
-  </UFormField>
-</template>
diff --git a/src/devtools/runtime/examples/LinkExample.vue b/src/devtools/runtime/examples/LinkExample.vue
deleted file mode 100644
index e5cbd6bc..00000000
--- a/src/devtools/runtime/examples/LinkExample.vue
+++ /dev/null
@@ -1,5 +0,0 @@
-<template>
-  <ULink>
-    Link
-  </ULink>
-</template>
diff --git a/src/devtools/runtime/examples/ModalExample.vue b/src/devtools/runtime/examples/ModalExample.vue
deleted file mode 100644
index d4c6ef2c..00000000
--- a/src/devtools/runtime/examples/ModalExample.vue
+++ /dev/null
@@ -1,8 +0,0 @@
-<template>
-  <UModal>
-    <UButton label="Open Modal" />
-    <template #content>
-      <div class="h-72" />
-    </template>
-  </UModal>
-</template>
diff --git a/src/devtools/runtime/examples/PopoverExample.vue b/src/devtools/runtime/examples/PopoverExample.vue
deleted file mode 100644
index a02ef4ec..00000000
--- a/src/devtools/runtime/examples/PopoverExample.vue
+++ /dev/null
@@ -1,8 +0,0 @@
-<template>
-  <UPopover>
-    <UButton label="Open Collapse" />
-    <template #content>
-      <div class="bg-(--ui-bg-accented)/40 h-24 w-60" />
-    </template>
-  </UPopover>
-</template>
diff --git a/src/devtools/runtime/examples/SkeletonExample.vue b/src/devtools/runtime/examples/SkeletonExample.vue
deleted file mode 100644
index 5b2fab1e..00000000
--- a/src/devtools/runtime/examples/SkeletonExample.vue
+++ /dev/null
@@ -1,3 +0,0 @@
-<template>
-  <USkeleton class="h-32 w-96" />
-</template>
diff --git a/src/devtools/runtime/examples/SlideoverExample.vue b/src/devtools/runtime/examples/SlideoverExample.vue
deleted file mode 100644
index 79a07dc7..00000000
--- a/src/devtools/runtime/examples/SlideoverExample.vue
+++ /dev/null
@@ -1,8 +0,0 @@
-<template>
-  <USlideover>
-    <UButton label="Open Slideover" />
-    <template #body>
-      <div class="size-96" />
-    </template>
-  </USlideover>
-</template>
diff --git a/src/devtools/runtime/examples/StepperExample.vue b/src/devtools/runtime/examples/StepperExample.vue
deleted file mode 100644
index e92d4df8..00000000
--- a/src/devtools/runtime/examples/StepperExample.vue
+++ /dev/null
@@ -1,44 +0,0 @@
-<script setup lang="ts">
-import { ref } from 'vue'
-
-const items = [
-  {
-    slot: 'address',
-    title: 'Address',
-    description: 'Add your address here',
-    icon: 'i-lucide-house'
-  }, {
-    slot: 'shipping',
-    title: 'Shipping',
-    description: 'Set your preferred shipping method',
-    icon: 'i-lucide-truck'
-  }, {
-    slot: 'checkout',
-    title: 'Checkout',
-    description: 'Confirm your order'
-  }
-]
-
-const stepper = ref()
-</script>
-
-<template>
-  <UStepper
-    ref="stepper"
-    :items="items"
-  >
-    <template #content="{ item }">
-      <Placeholder class="size-full min-h-60 min-w-60">
-        {{ item.title }}
-      </Placeholder>
-      <div class="flex gap-2 justify-between mt-2">
-        <UButton variant="outline" :disabled="!stepper?.hasPrevious" leading-icon="i-lucide-arrow-left" @click="stepper.previous()">
-          Back
-        </UButton>
-        <UButton :disabled="!stepper?.hasNext" trailing-icon="i-lucide-arrow-right" @click="stepper.next()">
-          Next
-        </UButton>
-      </div>
-    </template>
-  </UStepper>
-</template>
diff --git a/src/devtools/runtime/examples/ToasterExample.vue b/src/devtools/runtime/examples/ToasterExample.vue
deleted file mode 100644
index 96e97536..00000000
--- a/src/devtools/runtime/examples/ToasterExample.vue
+++ /dev/null
@@ -1,11 +0,0 @@
-<script setup>
-import { useToast } from '#imports'
-
-const toast = useToast()
-</script>
-
-<template>
-  <UToaster>
-    <UButton label="Open toast" @click="toast.add({ title: 'Heads up!' })" />
-  </UToaster>
-</template>
diff --git a/src/devtools/runtime/examples/TooltipExample.vue b/src/devtools/runtime/examples/TooltipExample.vue
deleted file mode 100644
index 8d950aa0..00000000
--- a/src/devtools/runtime/examples/TooltipExample.vue
+++ /dev/null
@@ -1,5 +0,0 @@
-<template>
-  <UTooltip>
-    <div class="bg-(--ui-bg-accented)/40 size-20" />
-  </UTooltip>
-</template>
diff --git a/src/module.ts b/src/module.ts
index cf84046f..ee9fadbf 100644
--- a/src/module.ts
+++ b/src/module.ts
@@ -1,10 +1,6 @@
 import { defu } from 'defu'
-import { createResolver, defineNuxtModule, addComponentsDir, addImportsDir, addVitePlugin, addPlugin, installModule, extendPages, hasNuxtModule } from '@nuxt/kit'
-import { addTemplates, buildTemplates } from './templates'
-import { addCustomTab, startSubprocess } from '@nuxt/devtools-kit'
-import sirv from 'sirv'
-import { getPort } from 'get-port-please'
-import { devtoolsMetaPlugin } from './devtools/meta'
+import { createResolver, defineNuxtModule, addComponentsDir, addImportsDir, addVitePlugin, addPlugin, installModule, hasNuxtModule } from '@nuxt/kit'
+import { addTemplates } from './templates'
 import { defaultOptions, getDefaultUiConfig, resolveColors } from './defaults'
 
 export type * from './runtime/types'
@@ -50,17 +46,6 @@ export interface ModuleOptions {
      */
     transitions?: boolean
   }
-
-  /**
-   * Configuration for the Nuxt UI devtools.
-   */
-  devtools?: {
-    /**
-     * Enable or disable Nuxt UI devtools.
-     * @defaultValue `true`
-     */
-    enabled?: boolean
-  }
 }
 
 export default defineNuxtModule<ModuleOptions>({
@@ -123,79 +108,5 @@ export default defineNuxtModule<ModuleOptions>({
     addImportsDir(resolve('./runtime/composables'))
 
     addTemplates(options, nuxt, resolve)
-
-    if (nuxt.options.dev && nuxt.options.devtools.enabled && options.devtools?.enabled) {
-      const templates = buildTemplates(options)
-      nuxt.options.vite = defu(nuxt.options?.vite, { plugins: [devtoolsMetaPlugin({ resolve, templates, options })] })
-
-      // Runs UI devtools in a subprocess for local development
-      if (process.env.NUXT_UI_DEVTOOLS_LOCAL) {
-        const PORT = await getPort({ port: 42124 })
-        nuxt.hook('app:resolve', () => {
-          startSubprocess(
-            {
-              command: 'pnpm',
-              args: ['nuxi', 'dev'],
-              cwd: './devtools',
-              stdio: 'pipe',
-              env: {
-                PORT: PORT.toString()
-              }
-            },
-            {
-              id: 'ui:devtools:local',
-              name: 'Nuxt UI DevTools Local',
-              icon: 'logos-nuxt-icon'
-            },
-            nuxt
-          )
-        })
-
-        nuxt.hook('vite:extendConfig', (config) => {
-          config.server ||= {}
-          config.server.proxy ||= {}
-          config.server.proxy['/__nuxt_ui__/devtools'] = {
-            target: `http://localhost:${PORT}`,
-            changeOrigin: true,
-            followRedirects: true,
-            ws: true,
-            rewriteWsOrigin: true
-          }
-        })
-      } else {
-        nuxt.hook('vite:serverCreated', async (server) => {
-          server.middlewares.use('/__nuxt_ui__/devtools', sirv(resolve('../dist/client/devtools'), {
-            single: true,
-            dev: true
-          }))
-        })
-      }
-
-      nuxt.options.routeRules = defu(nuxt.options.routeRules, { '/__nuxt_ui__/**': { ssr: false } })
-      extendPages((pages) => {
-        if (pages.length) {
-          pages.unshift({
-            name: 'ui-devtools',
-            path: '/__nuxt_ui__/components/:slug',
-            file: resolve('./devtools/runtime/DevtoolsRenderer.vue'),
-            meta: {
-              // https://github.com/nuxt/nuxt/pull/29366
-              // isolate: true
-              layout: false
-            }
-          })
-        }
-      })
-
-      addCustomTab({
-        name: 'nuxt-ui',
-        title: 'Nuxt UI',
-        icon: '/__nuxt_ui__/devtools/favicon.svg',
-        view: {
-          type: 'iframe',
-          src: '/__nuxt_ui__/devtools'
-        }
-      })
-    }
   }
 })
diff --git a/src/runtime/components/Accordion.vue b/src/runtime/components/Accordion.vue
index 0178c1dd..d9c9a1ca 100644
--- a/src/runtime/components/Accordion.vue
+++ b/src/runtime/components/Accordion.vue
@@ -3,7 +3,6 @@ import type { AccordionRootProps, AccordionRootEmits } from 'reka-ui'
 import type { AppConfig } from '@nuxt/schema'
 import _appConfig from '#build/app.config'
 import theme from '#build/ui/accordion'
-import { extendDevtoolsMeta } from '../composables/extendDevtoolsMeta'
 import { tv } from '../utils/tv'
 import type { DynamicSlots } from '../types/utils'
 
@@ -54,37 +53,6 @@ export type AccordionSlots<T extends { slot?: string }> = {
   content: SlotProps<T>
   body: SlotProps<T>
 } & DynamicSlots<T, SlotProps<T>>
-
-extendDevtoolsMeta({
-  defaultProps: {
-    items: [{
-      label: 'Getting Started',
-      icon: 'i-lucide-info',
-      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-lucide-download',
-      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.'
-    }, {
-      label: 'Theming',
-      icon: 'i-lucide-pipette',
-      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: 'Layouts',
-      icon: 'i-lucide-layout-dashboard',
-      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: 'Components',
-      icon: 'i-lucide-layers-3',
-      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: 'Utilities',
-      icon: 'i-lucide-wrench',
-      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>
 
 <script setup lang="ts" generic="T extends AccordionItem">
diff --git a/src/runtime/components/Alert.vue b/src/runtime/components/Alert.vue
index 02020f07..c53a59f2 100644
--- a/src/runtime/components/Alert.vue
+++ b/src/runtime/components/Alert.vue
@@ -3,7 +3,6 @@ import type { VariantProps } from 'tailwind-variants'
 import type { AppConfig } from '@nuxt/schema'
 import _appConfig from '#build/app.config'
 import theme from '#build/ui/alert'
-import { extendDevtoolsMeta } from '../composables/extendDevtoolsMeta'
 import { tv } from '../utils/tv'
 import type { AvatarProps, ButtonProps } from '../types'
 
@@ -60,8 +59,6 @@ export interface AlertSlots {
   actions(props?: {}): any
   close(props: { ui: any }): any
 }
-
-extendDevtoolsMeta<AlertProps>({ defaultProps: { title: 'Heads up!' } })
 </script>
 
 <script setup lang="ts">
diff --git a/src/runtime/components/App.vue b/src/runtime/components/App.vue
index d9dc090d..63068931 100644
--- a/src/runtime/components/App.vue
+++ b/src/runtime/components/App.vue
@@ -1,7 +1,6 @@
 <script lang="ts">
 import type { ConfigProviderProps, TooltipProviderProps } from 'reka-ui'
 import { localeContextInjectionKey } from '../composables/useLocale'
-import { extendDevtoolsMeta } from '../composables/extendDevtoolsMeta'
 import type { ToasterProps, Locale } from '../types'
 
 export interface AppProps extends Omit<ConfigProviderProps, 'useId' | 'dir' | 'locale'> {
@@ -17,8 +16,6 @@ export interface AppSlots {
 export default {
   name: 'App'
 }
-
-extendDevtoolsMeta({ ignore: true })
 </script>
 
 <script setup lang="ts">
diff --git a/src/runtime/components/Avatar.vue b/src/runtime/components/Avatar.vue
index ed713c9a..a6d96e50 100644
--- a/src/runtime/components/Avatar.vue
+++ b/src/runtime/components/Avatar.vue
@@ -3,7 +3,6 @@ import type { VariantProps } from 'tailwind-variants'
 import type { AppConfig } from '@nuxt/schema'
 import _appConfig from '#build/app.config'
 import theme from '#build/ui/avatar'
-import { extendDevtoolsMeta } from '../composables/extendDevtoolsMeta'
 import { tv } from '../utils/tv'
 
 const appConfigAvatar = _appConfig as AppConfig & { ui: { avatar: Partial<typeof theme> } }
@@ -30,8 +29,6 @@ export interface AvatarProps {
 export interface AvatarSlots {
   default(props?: {}): any
 }
-
-extendDevtoolsMeta<AvatarProps>({ defaultProps: { src: 'https://avatars.githubusercontent.com/u/739984?v=4', alt: 'Benjamin Canac' } })
 </script>
 
 <script setup lang="ts">
diff --git a/src/runtime/components/AvatarGroup.vue b/src/runtime/components/AvatarGroup.vue
index 21c650fd..11085760 100644
--- a/src/runtime/components/AvatarGroup.vue
+++ b/src/runtime/components/AvatarGroup.vue
@@ -3,7 +3,6 @@ import type { VariantProps } from 'tailwind-variants'
 import type { AppConfig } from '@nuxt/schema'
 import _appConfig from '#build/app.config'
 import theme from '#build/ui/avatar-group'
-import { extendDevtoolsMeta } from '../composables/extendDevtoolsMeta'
 import { tv } from '../utils/tv'
 
 const appConfigAvatarGroup = _appConfig as AppConfig & { ui: { avatarGroup: Partial<typeof theme> } }
@@ -30,8 +29,6 @@ export interface AvatarGroupProps {
 export interface AvatarGroupSlots {
   default(props?: {}): any
 }
-
-extendDevtoolsMeta({ example: 'AvatarGroupExample' })
 </script>
 
 <script setup lang="ts">
diff --git a/src/runtime/components/Badge.vue b/src/runtime/components/Badge.vue
index 26dcb5ef..3fe9e765 100644
--- a/src/runtime/components/Badge.vue
+++ b/src/runtime/components/Badge.vue
@@ -3,7 +3,6 @@ import type { VariantProps } from 'tailwind-variants'
 import type { AppConfig } from '@nuxt/schema'
 import _appConfig from '#build/app.config'
 import theme from '#build/ui/badge'
-import { extendDevtoolsMeta } from '../composables/extendDevtoolsMeta'
 import type { UseComponentIconsProps } from '../composables/useComponentIcons'
 import { tv } from '../utils/tv'
 import type { AvatarProps } from '../types'
@@ -57,8 +56,6 @@ const ui = computed(() => badge({
   size: buttonGroupSize.value || props.size,
   buttonGroup: orientation.value
 }))
-
-extendDevtoolsMeta({ defaultProps: { label: 'Badge' } })
 </script>
 
 <template>
diff --git a/src/runtime/components/Breadcrumb.vue b/src/runtime/components/Breadcrumb.vue
index 64b9663c..af2eb387 100644
--- a/src/runtime/components/Breadcrumb.vue
+++ b/src/runtime/components/Breadcrumb.vue
@@ -2,7 +2,6 @@
 import type { AppConfig } from '@nuxt/schema'
 import _appConfig from '#build/app.config'
 import theme from '#build/ui/breadcrumb'
-import { extendDevtoolsMeta } from '../composables/extendDevtoolsMeta'
 import { tv } from '../utils/tv'
 import type { AvatarProps, LinkProps } from '../types'
 import type { DynamicSlots, PartialString } from '../types/utils'
@@ -48,31 +47,6 @@ export type BreadcrumbSlots<T extends { slot?: string }> = {
   'item-trailing': SlotProps<T>
   'separator'(props?: {}): any
 } & DynamicSlots<T, SlotProps<T>>
-
-extendDevtoolsMeta({
-  defaultProps: {
-    items: [
-      { label: 'Home', to: '/' },
-      {
-        slot: 'dropdown',
-        icon: 'i-lucide-ellipsis',
-        children: [{
-          label: 'Documentation'
-        }, {
-          label: 'Themes'
-        }, {
-          label: 'GitHub'
-        }]
-      }, {
-        label: 'Components',
-        disabled: true
-      }, {
-        label: 'Breadcrumb',
-        to: '/components/breadcrumb'
-      }
-    ]
-  }
-})
 </script>
 
 <script setup lang="ts" generic="T extends BreadcrumbItem">
diff --git a/src/runtime/components/Button.vue b/src/runtime/components/Button.vue
index abfeb030..5216ed3b 100644
--- a/src/runtime/components/Button.vue
+++ b/src/runtime/components/Button.vue
@@ -5,7 +5,6 @@ import _appConfig from '#build/app.config'
 import theme from '#build/ui/button'
 import type { LinkProps } from './Link.vue'
 import type { UseComponentIconsProps } from '../composables/useComponentIcons'
-import { extendDevtoolsMeta } from '../composables/extendDevtoolsMeta'
 import { tv } from '../utils/tv'
 import type { AvatarProps } from '../types'
 import type { PartialString } from '../types/utils'
@@ -32,9 +31,6 @@ export interface ButtonProps extends UseComponentIconsProps, Omit<LinkProps, 'ra
   ui?: PartialString<typeof button.slots>
 }
 
-// Injects props to use as default in the devtools playground.
-extendDevtoolsMeta<ButtonProps>({ defaultProps: { label: 'Click me!' } })
-
 export interface ButtonSlots {
   leading(props?: {}): any
   default(props?: {}): any
diff --git a/src/runtime/components/ButtonGroup.vue b/src/runtime/components/ButtonGroup.vue
index 8f56c1dd..46aced22 100644
--- a/src/runtime/components/ButtonGroup.vue
+++ b/src/runtime/components/ButtonGroup.vue
@@ -3,7 +3,6 @@ import type { VariantProps } from 'tailwind-variants'
 import type { AppConfig } from '@nuxt/schema'
 import _appConfig from '#build/app.config'
 import theme from '#build/ui/button-group'
-import { extendDevtoolsMeta } from '../composables/extendDevtoolsMeta'
 import { tv } from '../utils/tv'
 
 const appConfigButtonGroup = _appConfig as AppConfig & { ui: { buttonGroup: Partial<typeof theme> } }
@@ -30,8 +29,6 @@ export interface ButtonGroupProps {
 export interface ButtonGroupSlots {
   default(props?: {}): any
 }
-
-extendDevtoolsMeta({ example: 'ButtonGroupExample' })
 </script>
 
 <script setup lang="ts">
diff --git a/src/runtime/components/Card.vue b/src/runtime/components/Card.vue
index 0983f350..070468c3 100644
--- a/src/runtime/components/Card.vue
+++ b/src/runtime/components/Card.vue
@@ -3,7 +3,6 @@ import type { VariantProps } from 'tailwind-variants'
 import type { AppConfig } from '@nuxt/schema'
 import _appConfig from '#build/app.config'
 import theme from '#build/ui/card'
-import { extendDevtoolsMeta } from '../composables/extendDevtoolsMeta'
 import { tv } from '../utils/tv'
 
 const appConfigCard = _appConfig as AppConfig & { ui: { card: Partial<typeof theme> } }
@@ -28,8 +27,6 @@ export interface CardSlots {
   default(props?: {}): any
   footer(props?: {}): any
 }
-
-extendDevtoolsMeta({ example: 'CardExample' })
 </script>
 
 <script setup lang="ts">
diff --git a/src/runtime/components/Carousel.vue b/src/runtime/components/Carousel.vue
index 19b91301..f4f725b5 100644
--- a/src/runtime/components/Carousel.vue
+++ b/src/runtime/components/Carousel.vue
@@ -11,7 +11,6 @@ import type { FadeOptionsType } from 'embla-carousel-fade'
 import type { WheelGesturesPluginOptions } from 'embla-carousel-wheel-gestures'
 import _appConfig from '#build/app.config'
 import theme from '#build/ui/carousel'
-import { extendDevtoolsMeta } from '../composables/extendDevtoolsMeta'
 import { tv } from '../utils/tv'
 import type { ButtonProps } from '../types'
 import type { PartialString } from '../types/utils'
@@ -97,8 +96,6 @@ export interface CarouselProps<T> extends Omit<EmblaOptionsType, 'axis' | 'conta
 export type CarouselSlots<T> = {
   default(props: { item: T, index: number }): any
 }
-
-extendDevtoolsMeta({ example: 'CarouselExample' })
 </script>
 
 <script setup lang="ts" generic="T extends AcceptableValue">
diff --git a/src/runtime/components/Checkbox.vue b/src/runtime/components/Checkbox.vue
index 53682e35..bd790d3f 100644
--- a/src/runtime/components/Checkbox.vue
+++ b/src/runtime/components/Checkbox.vue
@@ -4,7 +4,6 @@ import type { CheckboxRootProps } from 'reka-ui'
 import type { AppConfig } from '@nuxt/schema'
 import _appConfig from '#build/app.config'
 import theme from '#build/ui/checkbox'
-import { extendDevtoolsMeta } from '../composables/extendDevtoolsMeta'
 import { tv } from '../utils/tv'
 
 const appConfigCheckbox = _appConfig as AppConfig & { ui: { checkbox: Partial<typeof theme> } }
@@ -45,8 +44,6 @@ export interface CheckboxSlots {
   label(props: { label?: string }): any
   description(props: { description?: string }): any
 }
-
-extendDevtoolsMeta({ defaultProps: { label: 'Check me!' } })
 </script>
 
 <script setup lang="ts">
diff --git a/src/runtime/components/Chip.vue b/src/runtime/components/Chip.vue
index e5a888bb..54445e70 100644
--- a/src/runtime/components/Chip.vue
+++ b/src/runtime/components/Chip.vue
@@ -3,7 +3,6 @@ import type { VariantProps } from 'tailwind-variants'
 import type { AppConfig } from '@nuxt/schema'
 import _appConfig from '#build/app.config'
 import theme from '#build/ui/chip'
-import { extendDevtoolsMeta } from '../composables/extendDevtoolsMeta'
 import { tv } from '../utils/tv'
 
 const appConfigChip = _appConfig as AppConfig & { ui: { chip: Partial<typeof theme> } }
@@ -39,8 +38,6 @@ export interface ChipSlots {
   default(props?: {}): any
   content(props?: {}): any
 }
-
-extendDevtoolsMeta({ example: 'ChipExample' })
 </script>
 
 <script setup lang="ts">
diff --git a/src/runtime/components/Collapsible.vue b/src/runtime/components/Collapsible.vue
index 5c6edcae..de5e47fb 100644
--- a/src/runtime/components/Collapsible.vue
+++ b/src/runtime/components/Collapsible.vue
@@ -3,7 +3,6 @@ import type { CollapsibleRootProps, CollapsibleRootEmits } from 'reka-ui'
 import type { AppConfig } from '@nuxt/schema'
 import _appConfig from '#build/app.config'
 import theme from '#build/ui/collapsible'
-import { extendDevtoolsMeta } from '../composables/extendDevtoolsMeta'
 import { tv } from '../utils/tv'
 
 const appConfigCollapsible = _appConfig as AppConfig & { ui: { collapsible: Partial<typeof theme> } }
@@ -26,8 +25,6 @@ export interface CollapsibleSlots {
   default(props: { open: boolean }): any
   content(props?: {}): any
 }
-
-extendDevtoolsMeta({ example: 'CollapsibleExample' })
 </script>
 
 <script setup lang="ts">
diff --git a/src/runtime/components/CommandPalette.vue b/src/runtime/components/CommandPalette.vue
index aeacb0c1..c511c586 100644
--- a/src/runtime/components/CommandPalette.vue
+++ b/src/runtime/components/CommandPalette.vue
@@ -6,7 +6,6 @@ import type { UseFuseOptions } from '@vueuse/integrations/useFuse'
 import _appConfig from '#build/app.config'
 import theme from '#build/ui/command-palette'
 import type { UseComponentIconsProps } from '../composables/useComponentIcons'
-import { extendDevtoolsMeta } from '../composables/extendDevtoolsMeta'
 import { tv } from '../utils/tv'
 import type { AvatarProps, ButtonProps, ChipProps, KbdProps, InputProps, LinkProps } from '../types'
 import type { DynamicSlots, PartialString } from '../types/utils'
@@ -122,8 +121,6 @@ export type CommandPaletteSlots<G extends { slot?: string }, T extends { slot?:
   'item-label': SlotProps<T>
   'item-trailing': SlotProps<T>
 } & DynamicSlots<G, SlotProps<T>> & DynamicSlots<T, SlotProps<T>>
-
-extendDevtoolsMeta({ example: 'CommandPaletteExample', ignoreProps: ['groups'] })
 </script>
 
 <script setup lang="ts" generic="G extends CommandPaletteGroup<T>, T extends CommandPaletteItem">
diff --git a/src/runtime/components/Container.vue b/src/runtime/components/Container.vue
index a9d07f9a..6d89a8e8 100644
--- a/src/runtime/components/Container.vue
+++ b/src/runtime/components/Container.vue
@@ -2,7 +2,6 @@
 import type { AppConfig } from '@nuxt/schema'
 import _appConfig from '#build/app.config'
 import theme from '#build/ui/container'
-import { extendDevtoolsMeta } from '../composables/extendDevtoolsMeta'
 import { tv } from '../utils/tv'
 
 const appConfigContainer = _appConfig as AppConfig & { ui: { container: Partial<typeof theme> } }
@@ -21,8 +20,6 @@ export interface ContainerProps {
 export interface ContainerSlots {
   default(props?: {}): any
 }
-
-extendDevtoolsMeta({ example: 'ContainerExample' })
 </script>
 
 <script setup lang="ts">
diff --git a/src/runtime/components/ContextMenu.vue b/src/runtime/components/ContextMenu.vue
index c0a7060c..c436f8dd 100644
--- a/src/runtime/components/ContextMenu.vue
+++ b/src/runtime/components/ContextMenu.vue
@@ -4,7 +4,6 @@ import type { ContextMenuRootProps, ContextMenuRootEmits, ContextMenuContentProp
 import type { AppConfig } from '@nuxt/schema'
 import _appConfig from '#build/app.config'
 import theme from '#build/ui/context-menu'
-import { extendDevtoolsMeta } from '../composables/extendDevtoolsMeta'
 import { tv } from '../utils/tv'
 import type { AvatarProps, KbdProps, LinkProps } from '../types'
 import type { DynamicSlots, PartialString } from '../types/utils'
@@ -85,67 +84,6 @@ export type ContextMenuSlots<T extends { slot?: string }> = {
   'item-label': SlotProps<T>
   'item-trailing': SlotProps<T>
 } & DynamicSlots<T, SlotProps<T>>
-
-extendDevtoolsMeta({
-  example: 'ContextMenuExample',
-  ignoreProps: ['items'],
-  defaultProps: {
-    items: [
-      [{
-        label: 'My account',
-        avatar: {
-          src: 'https://avatars.githubusercontent.com/u/739984?v=4'
-        }
-      }],
-      [{
-        label: 'Appearance',
-        children: [{
-          label: 'System',
-          icon: 'i-lucide-monitor'
-        }, {
-          label: 'Light',
-          icon: 'i-lucide-sun'
-        }, {
-          label: 'Dark',
-          icon: 'i-lucide-moon'
-        }]
-      }],
-      [{
-        label: 'Show Sidebar',
-        kbds: ['meta', 'S']
-      }, {
-        label: 'Show Toolbar',
-        kbds: ['shift', 'meta', 'D']
-      }, {
-        label: 'Collapse Pinned Tabs',
-        disabled: true
-      }], [{
-        label: 'Refresh the Page'
-      }, {
-        label: 'Clear Cookies and Refresh'
-      }, {
-        label: 'Clear Cache and Refresh'
-      }, {
-        type: 'separator'
-      }, {
-        label: 'Developer',
-        children: [[{
-          label: 'View Source',
-          kbds: ['option', 'meta', 'U']
-        }, {
-          label: 'Developer Tools',
-          kbds: ['option', 'meta', 'I']
-        }], [{
-          label: 'Inspect Elements',
-          kbds: ['option', 'meta', 'C']
-        }], [{
-          label: 'JavaScript Console',
-          kbds: ['option', 'meta', 'J']
-        }]]
-      }]
-    ]
-  }
-})
 </script>
 
 <script setup lang="ts" generic="T extends ContextMenuItem">
diff --git a/src/runtime/components/Drawer.vue b/src/runtime/components/Drawer.vue
index d5b8111a..c0b0d133 100644
--- a/src/runtime/components/Drawer.vue
+++ b/src/runtime/components/Drawer.vue
@@ -4,7 +4,6 @@ import type { DialogContentProps } from 'reka-ui'
 import type { AppConfig } from '@nuxt/schema'
 import _appConfig from '#build/app.config'
 import theme from '#build/ui/drawer'
-import { extendDevtoolsMeta } from '../composables/extendDevtoolsMeta'
 import { tv } from '../utils/tv'
 
 const appConfigDrawer = _appConfig as AppConfig & { ui: { drawer: Partial<typeof theme> } }
@@ -62,8 +61,6 @@ export interface DrawerSlots {
   body(props?: {}): any
   footer(props?: {}): any
 }
-
-extendDevtoolsMeta({ example: 'DrawerExample' })
 </script>
 
 <script setup lang="ts">
diff --git a/src/runtime/components/DropdownMenu.vue b/src/runtime/components/DropdownMenu.vue
index 7244809b..32b45328 100644
--- a/src/runtime/components/DropdownMenu.vue
+++ b/src/runtime/components/DropdownMenu.vue
@@ -4,7 +4,6 @@ import type { DropdownMenuRootProps, DropdownMenuRootEmits, DropdownMenuContentP
 import type { AppConfig } from '@nuxt/schema'
 import _appConfig from '#build/app.config'
 import theme from '#build/ui/dropdown-menu'
-import { extendDevtoolsMeta } from '../composables/extendDevtoolsMeta'
 import { tv } from '../utils/tv'
 import type { AvatarProps, KbdProps, LinkProps } from '../types'
 import type { DynamicSlots, PartialString } from '../types/utils'
@@ -93,55 +92,6 @@ export type DropdownMenuSlots<T extends { slot?: string }> = {
   'item-label': SlotProps<T>
   'item-trailing': SlotProps<T>
 } & DynamicSlots<T, SlotProps<T>>
-
-extendDevtoolsMeta({
-  example: 'DropdownMenuExample',
-  ignoreProps: ['items'],
-  defaultProps: {
-    items: [
-      [{
-        label: 'My account',
-        avatar: {
-          src: 'https://avatars.githubusercontent.com/u/739984?v=4'
-        },
-        type: 'label'
-      }], [{
-        label: 'Profile',
-        icon: 'i-lucide-user',
-        slot: 'custom'
-      }, {
-        label: 'Billing',
-        icon: 'i-lucide-credit-card',
-        kbds: ['meta', 'b']
-      }, {
-        label: 'Settings',
-        icon: 'i-lucide-cog',
-        kbds: ['?']
-      }], [{
-        label: 'Invite users',
-        icon: 'i-lucide-user-plus',
-        children: [[{
-          label: 'Invite by email',
-          icon: 'i-lucide-send-horizontal'
-        }, {
-          label: 'Invite by link',
-          icon: 'i-lucide-link',
-          kbds: ['meta', 'i']
-        }]]
-      }],
-      [{
-        label: 'GitHub',
-        icon: 'i-simple-icons-github',
-        to: 'https://github.com/nuxt/ui',
-        target: '_blank'
-      }, {
-        label: 'Support',
-        icon: 'i-lucide-life-buoy',
-        to: '/components/dropdown-menu'
-      }]
-    ]
-  }
-})
 </script>
 
 <script setup lang="ts" generic="T extends DropdownMenuItem">
diff --git a/src/runtime/components/Form.vue b/src/runtime/components/Form.vue
index 6842eca6..789069c8 100644
--- a/src/runtime/components/Form.vue
+++ b/src/runtime/components/Form.vue
@@ -2,7 +2,6 @@
 import type { AppConfig } from '@nuxt/schema'
 import _appConfig from '#build/app.config'
 import theme from '#build/ui/form'
-import { extendDevtoolsMeta } from '../composables/extendDevtoolsMeta'
 import { tv } from '../utils/tv'
 import type { FormSchema, FormError, FormInputEvents, FormErrorEvent, FormSubmitEvent, FormEvent, Form, FormErrorWithId } from '../types/form'
 import type { DeepReadonly } from 'vue'
@@ -32,8 +31,6 @@ export interface FormEmits<T extends object> {
 export interface FormSlots {
   default(props?: {}): any
 }
-
-extendDevtoolsMeta({ example: 'FormExample' })
 </script>
 
 <script lang="ts" setup generic="T extends object">
diff --git a/src/runtime/components/FormField.vue b/src/runtime/components/FormField.vue
index a3b6d51c..6d086533 100644
--- a/src/runtime/components/FormField.vue
+++ b/src/runtime/components/FormField.vue
@@ -4,7 +4,6 @@ import type { AppConfig } from '@nuxt/schema'
 import _appConfig from '#build/app.config'
 import theme from '#build/ui/form-field'
 import { tv } from '../utils/tv'
-import { extendDevtoolsMeta } from '../composables/extendDevtoolsMeta'
 
 const appConfigFormField = _appConfig as AppConfig & { ui: { formField: Partial<typeof theme> } }
 
@@ -43,8 +42,6 @@ export interface FormFieldSlots {
   error(props: { error?: string | boolean }): any
   default(props: { error?: string | boolean }): any
 }
-
-extendDevtoolsMeta({ example: 'FormFieldExample', defaultProps: { label: 'Label' } })
 </script>
 
 <script setup lang="ts">
diff --git a/src/runtime/components/InputMenu.vue b/src/runtime/components/InputMenu.vue
index 7196c61f..2688c2e0 100644
--- a/src/runtime/components/InputMenu.vue
+++ b/src/runtime/components/InputMenu.vue
@@ -6,7 +6,6 @@ import type { AppConfig } from '@nuxt/schema'
 import _appConfig from '#build/app.config'
 import theme from '#build/ui/input-menu'
 import type { UseComponentIconsProps } from '../composables/useComponentIcons'
-import { extendDevtoolsMeta } from '../composables/extendDevtoolsMeta'
 import { tv } from '../utils/tv'
 import type { AvatarProps, ChipProps, InputProps } from '../types'
 import type { PartialString, MaybeArrayOfArray, MaybeArrayOfArrayItem, SelectModelValue, SelectModelValueEmits, SelectItemKey } from '../types/utils'
@@ -137,8 +136,6 @@ export interface InputMenuSlots<T, M extends boolean> {
   'tags-item-delete': SlotProps<T>
   'create-item-label'(props: { item: string }): any
 }
-
-extendDevtoolsMeta({ defaultProps: { items: ['Option 1', 'Option 2', 'Option 3'] } })
 </script>
 
 <script setup lang="ts" generic="T extends MaybeArrayOfArrayItem<I>, I extends MaybeArrayOfArray<InputMenuItem | AcceptableValue | boolean> = MaybeArrayOfArray<InputMenuItem | AcceptableValue | boolean>, V extends SelectItemKey<T> | undefined = undefined, M extends boolean = false">
diff --git a/src/runtime/components/Kbd.vue b/src/runtime/components/Kbd.vue
index d697354a..a6a28d7f 100644
--- a/src/runtime/components/Kbd.vue
+++ b/src/runtime/components/Kbd.vue
@@ -4,7 +4,6 @@ import type { AppConfig } from '@nuxt/schema'
 import _appConfig from '#build/app.config'
 import theme from '#build/ui/kbd'
 import type { KbdKey } from '../composables/useKbd'
-import { extendDevtoolsMeta } from '../composables/extendDevtoolsMeta'
 import { tv } from '../utils/tv'
 
 const appConfigKbd = _appConfig as AppConfig & { ui: { kbd: Partial<typeof theme> } }
@@ -28,7 +27,6 @@ export interface KbdProps {
 export interface KbdSlots {
   default(props?: {}): any
 }
-extendDevtoolsMeta({ defaultProps: { value: 'K' } })
 </script>
 
 <script setup lang="ts">
diff --git a/src/runtime/components/Link.vue b/src/runtime/components/Link.vue
index 7d9bddde..34501557 100644
--- a/src/runtime/components/Link.vue
+++ b/src/runtime/components/Link.vue
@@ -5,7 +5,6 @@ import _appConfig from '#build/app.config'
 import type { RouterLinkProps, RouteLocationRaw } from 'vue-router'
 import theme from '#build/ui/link'
 import { tv } from '../utils/tv'
-import { extendDevtoolsMeta } from '../composables/extendDevtoolsMeta'
 
 interface NuxtLinkProps extends Omit<RouterLinkProps, 'to'> {
   /**
@@ -88,8 +87,6 @@ export interface LinkProps extends NuxtLinkProps {
 export interface LinkSlots {
   default(props: { active: boolean }): any
 }
-
-extendDevtoolsMeta({ example: 'LinkExample' })
 </script>
 
 <script setup lang="ts">
diff --git a/src/runtime/components/Modal.vue b/src/runtime/components/Modal.vue
index ada37dd3..86ea8ef8 100644
--- a/src/runtime/components/Modal.vue
+++ b/src/runtime/components/Modal.vue
@@ -3,7 +3,6 @@ import type { DialogRootProps, DialogRootEmits, DialogContentProps } from 'reka-
 import type { AppConfig } from '@nuxt/schema'
 import _appConfig from '#build/app.config'
 import theme from '#build/ui/modal'
-import { extendDevtoolsMeta } from '../composables/extendDevtoolsMeta'
 import { tv } from '../utils/tv'
 import type { ButtonProps } from '../types'
 
@@ -70,8 +69,6 @@ export interface ModalSlots {
   body(props?: {}): any
   footer(props?: {}): any
 }
-
-extendDevtoolsMeta({ example: 'ModalExample' })
 </script>
 
 <script setup lang="ts">
diff --git a/src/runtime/components/NavigationMenu.vue b/src/runtime/components/NavigationMenu.vue
index b264cbbb..bf7b99aa 100644
--- a/src/runtime/components/NavigationMenu.vue
+++ b/src/runtime/components/NavigationMenu.vue
@@ -4,7 +4,6 @@ import type { NavigationMenuRootProps, NavigationMenuRootEmits, NavigationMenuCo
 import type { AppConfig } from '@nuxt/schema'
 import _appConfig from '#build/app.config'
 import theme from '#build/ui/navigation-menu'
-import { extendDevtoolsMeta } from '../composables/extendDevtoolsMeta'
 import { tv } from '../utils/tv'
 import type { AvatarProps, BadgeProps, LinkProps } from '../types'
 import type { DynamicSlots, MaybeArrayOfArray, MaybeArrayOfArrayItem, PartialString } from '../types/utils'
@@ -109,45 +108,6 @@ export type NavigationMenuSlots<T extends { slot?: string }> = {
   'item-trailing': SlotProps<T>
   'item-content': SlotProps<T>
 } & DynamicSlots<T, SlotProps<T>>
-
-extendDevtoolsMeta({
-  ignoreProps: ['items'],
-  defaultProps: {
-    items: [
-      [{
-        label: 'Documentation',
-        icon: 'i-lucide-book-open',
-        badge: 10,
-        children: [{
-          label: 'Introduction',
-          description: 'Fully styled and customizable components for Nuxt.',
-          icon: 'i-lucide-house'
-        }, {
-          label: 'Installation',
-          description: 'Learn how to install and configure Nuxt UI in your application.',
-          icon: 'i-lucide-cloud-download'
-        }, {
-          label: 'Theming',
-          description: 'Learn how to customize the look and feel of the components.',
-          icon: 'i-lucide-swatch-book'
-        }, {
-          label: 'Shortcuts',
-          description: 'Learn how to display and define keyboard shortcuts in your app.',
-          icon: 'i-lucide-monitor'
-        }]
-      }, {
-        label: 'GitHub',
-        icon: 'i-simple-icons-github',
-        to: 'https://github.com/nuxt/ui',
-        target: '_blank'
-      }, {
-        label: 'Help',
-        icon: 'i-lucide-circle-help',
-        disabled: true
-      }]
-    ]
-  }
-})
 </script>
 
 <script setup lang="ts" generic="T extends MaybeArrayOfArrayItem<I>, I extends MaybeArrayOfArray<NavigationMenuItem>">
diff --git a/src/runtime/components/Pagination.vue b/src/runtime/components/Pagination.vue
index e9013307..c8583072 100644
--- a/src/runtime/components/Pagination.vue
+++ b/src/runtime/components/Pagination.vue
@@ -4,7 +4,6 @@ import type { AppConfig } from '@nuxt/schema'
 import type { RouteLocationRaw } from '#vue-router'
 import _appConfig from '#build/app.config'
 import theme from '#build/ui/pagination'
-import { extendDevtoolsMeta } from '../composables/extendDevtoolsMeta'
 import { tv } from '../utils/tv'
 import type { ButtonProps } from '../types'
 
@@ -98,8 +97,6 @@ export interface PaginationSlots {
     index: number
   }): any
 }
-
-extendDevtoolsMeta({ defaultProps: { total: 50 } })
 </script>
 
 <script setup lang="ts">
diff --git a/src/runtime/components/Popover.vue b/src/runtime/components/Popover.vue
index 9d6e32f7..8db9c0cb 100644
--- a/src/runtime/components/Popover.vue
+++ b/src/runtime/components/Popover.vue
@@ -4,7 +4,6 @@ import type { AppConfig } from '@nuxt/schema'
 import _appConfig from '#build/app.config'
 import theme from '#build/ui/popover'
 import { tv } from '../utils/tv'
-import { extendDevtoolsMeta } from '../composables/extendDevtoolsMeta'
 
 const appConfigPopover = _appConfig as AppConfig & { ui: { popover: Partial<typeof theme> } }
 
@@ -46,8 +45,6 @@ export interface PopoverSlots {
   default(props: { open: boolean }): any
   content(props?: {}): any
 }
-
-extendDevtoolsMeta({ example: 'PopoverExample' })
 </script>
 
 <script setup lang="ts">
diff --git a/src/runtime/components/RadioGroup.vue b/src/runtime/components/RadioGroup.vue
index 07a9d8fa..dcc0a19b 100644
--- a/src/runtime/components/RadioGroup.vue
+++ b/src/runtime/components/RadioGroup.vue
@@ -4,7 +4,6 @@ import type { RadioGroupRootProps, RadioGroupRootEmits, AcceptableValue } from '
 import type { AppConfig } from '@nuxt/schema'
 import _appConfig from '#build/app.config'
 import theme from '#build/ui/radio-group'
-import { extendDevtoolsMeta } from '../composables/extendDevtoolsMeta'
 import { tv } from '../utils/tv'
 
 const appConfigRadioGroup = _appConfig as AppConfig & { ui: { radioGroup: Partial<typeof theme> } }
@@ -65,8 +64,6 @@ export interface RadioGroupSlots<T> {
   label: SlotProps<T>
   description: SlotProps<T>
 }
-
-extendDevtoolsMeta({ defaultProps: { items: ['Option 1', 'Option 2', 'Option 3'] } })
 </script>
 
 <script setup lang="ts" generic="T extends RadioGroupItem | AcceptableValue">
diff --git a/src/runtime/components/Select.vue b/src/runtime/components/Select.vue
index 0aa766a2..9dc59e9c 100644
--- a/src/runtime/components/Select.vue
+++ b/src/runtime/components/Select.vue
@@ -5,7 +5,6 @@ import type { AppConfig } from '@nuxt/schema'
 import _appConfig from '#build/app.config'
 import theme from '#build/ui/select'
 import type { UseComponentIconsProps } from '../composables/useComponentIcons'
-import { extendDevtoolsMeta } from '../composables/extendDevtoolsMeta'
 import { tv } from '../utils/tv'
 import type { AvatarProps, ChipProps, InputProps } from '../types'
 import type { PartialString, MaybeArrayOfArray, MaybeArrayOfArrayItem, SelectModelValue, SelectModelValueEmits, SelectItemKey } from '../types/utils'
@@ -102,8 +101,6 @@ export interface SelectSlots<T, M extends boolean> {
   'item-label': SlotProps<T>
   'item-trailing': SlotProps<T>
 }
-
-extendDevtoolsMeta({ defaultProps: { items: ['Option 1', 'Option 2', 'Option 3'] } })
 </script>
 
 <script setup lang="ts" generic="T extends MaybeArrayOfArrayItem<I>, I extends MaybeArrayOfArray<SelectItem | AcceptableValue | boolean> = MaybeArrayOfArray<SelectItem | AcceptableValue | boolean>, V extends SelectItemKey<T> | undefined = undefined, M extends boolean = false">
diff --git a/src/runtime/components/SelectMenu.vue b/src/runtime/components/SelectMenu.vue
index 5ba98d15..f8e0fbd7 100644
--- a/src/runtime/components/SelectMenu.vue
+++ b/src/runtime/components/SelectMenu.vue
@@ -5,7 +5,6 @@ import type { AppConfig } from '@nuxt/schema'
 import _appConfig from '#build/app.config'
 import theme from '#build/ui/select-menu'
 import type { UseComponentIconsProps } from '../composables/useComponentIcons'
-import { extendDevtoolsMeta } from '../composables/extendDevtoolsMeta'
 import { tv } from '../utils/tv'
 import type { AvatarProps, ChipProps, InputProps } from '../types'
 import type { PartialString, MaybeArrayOfArray, MaybeArrayOfArrayItem, SelectModelValue, SelectModelValueEmits, SelectItemKey } from '../types/utils'
@@ -128,8 +127,6 @@ export interface SelectMenuSlots<T, M extends boolean> {
   'item-trailing': SlotProps<T>
   'create-item-label'(props: { item: string }): any
 }
-
-extendDevtoolsMeta({ defaultProps: { items: ['Option 1', 'Option 2', 'Option 3'] } })
 </script>
 
 <script setup lang="ts" generic="T extends MaybeArrayOfArrayItem<I>, I extends MaybeArrayOfArray<SelectMenuItem | AcceptableValue | boolean> = MaybeArrayOfArray<SelectMenuItem | AcceptableValue | boolean>, V extends SelectItemKey<T> | undefined = undefined, M extends boolean = false">
diff --git a/src/runtime/components/Skeleton.vue b/src/runtime/components/Skeleton.vue
index 8e7068fd..e641d339 100644
--- a/src/runtime/components/Skeleton.vue
+++ b/src/runtime/components/Skeleton.vue
@@ -3,7 +3,6 @@ import type { AppConfig } from '@nuxt/schema'
 import _appConfig from '#build/app.config'
 import theme from '#build/ui/skeleton'
 import { tv } from '../utils/tv'
-import { extendDevtoolsMeta } from '../composables/extendDevtoolsMeta'
 
 const appConfigSkeleton = _appConfig as AppConfig & { ui: { skeleton: Partial<typeof theme> } }
 
@@ -17,8 +16,6 @@ export interface SkeletonProps {
   as?: any
   class?: any
 }
-
-extendDevtoolsMeta({ example: 'SkeletonExample' })
 </script>
 
 <script setup lang="ts">
diff --git a/src/runtime/components/Slideover.vue b/src/runtime/components/Slideover.vue
index f935e1e8..631b5614 100644
--- a/src/runtime/components/Slideover.vue
+++ b/src/runtime/components/Slideover.vue
@@ -4,7 +4,6 @@ import type { DialogRootProps, DialogRootEmits, DialogContentProps } from 'reka-
 import type { AppConfig } from '@nuxt/schema'
 import _appConfig from '#build/app.config'
 import theme from '#build/ui/slideover'
-import { extendDevtoolsMeta } from '../composables/extendDevtoolsMeta'
 import { tv } from '../utils/tv'
 import type { ButtonProps } from '../types'
 
@@ -69,8 +68,6 @@ export interface SlideoverSlots {
   body(props?: {}): any
   footer(props?: {}): any
 }
-
-extendDevtoolsMeta({ example: 'SlideoverExample' })
 </script>
 
 <script setup lang="ts">
diff --git a/src/runtime/components/Stepper.vue b/src/runtime/components/Stepper.vue
index 1cbc6d96..566ecaa1 100644
--- a/src/runtime/components/Stepper.vue
+++ b/src/runtime/components/Stepper.vue
@@ -4,7 +4,6 @@ import type { StepperRootProps, StepperRootEmits } from 'reka-ui'
 import type { AppConfig } from '@nuxt/schema'
 import _appConfig from '#build/app.config'
 import theme from '#build/ui/stepper'
-import { extendDevtoolsMeta } from '../composables/extendDevtoolsMeta'
 import { tv } from '../utils/tv'
 import type { DynamicSlots } from '../types/utils'
 
@@ -56,8 +55,6 @@ export type StepperSlots<T extends StepperItem> = {
   description: SlotProps<T>
   content: SlotProps<T>
 } & DynamicSlots<T, SlotProps<T>>
-
-extendDevtoolsMeta({ example: 'StepperExample' })
 </script>
 
 <script setup lang="ts" generic="T extends StepperItem">
diff --git a/src/runtime/components/Switch.vue b/src/runtime/components/Switch.vue
index 75bf5914..7b48f3d9 100644
--- a/src/runtime/components/Switch.vue
+++ b/src/runtime/components/Switch.vue
@@ -4,7 +4,6 @@ import type { SwitchRootProps } from 'reka-ui'
 import type { AppConfig } from '@nuxt/schema'
 import _appConfig from '#build/app.config'
 import theme from '#build/ui/switch'
-import { extendDevtoolsMeta } from '../composables/extendDevtoolsMeta'
 import { tv } from '../utils/tv'
 import type { PartialString } from '../types/utils'
 
@@ -47,8 +46,6 @@ export interface SwitchSlots {
   label(props: { label?: string }): any
   description(props: { description?: string }): any
 }
-
-extendDevtoolsMeta({ defaultProps: { label: 'Switch me!' } })
 </script>
 
 <script setup lang="ts">
diff --git a/src/runtime/components/Tabs.vue b/src/runtime/components/Tabs.vue
index ccf572cf..b1b9a8c5 100644
--- a/src/runtime/components/Tabs.vue
+++ b/src/runtime/components/Tabs.vue
@@ -4,7 +4,6 @@ import type { TabsRootProps, TabsRootEmits } from 'reka-ui'
 import type { AppConfig } from '@nuxt/schema'
 import _appConfig from '#build/app.config'
 import theme from '#build/ui/tabs'
-import { extendDevtoolsMeta } from '../composables/extendDevtoolsMeta'
 import { tv } from '../utils/tv'
 import type { AvatarProps } from '../types'
 import type { DynamicSlots, PartialString } from '../types/utils'
@@ -65,24 +64,6 @@ export type TabsSlots<T extends { slot?: string }> = {
   trailing: SlotProps<T>
   content: SlotProps<T>
 } & DynamicSlots<T, SlotProps<T>>
-
-extendDevtoolsMeta({
-  defaultProps: {
-    items: [{
-      label: 'Tab1',
-      avatar: { src: 'https://avatars.githubusercontent.com/u/739984?v=4' },
-      content: 'This is the content shown for Tab1'
-    }, {
-      label: 'Tab2',
-      icon: 'i-lucide-user',
-      content: 'And, this is the content for Tab2'
-    }, {
-      label: 'Tab3',
-      icon: 'i-lucide-bell',
-      content: 'Finally, this is the content for Tab3'
-    }]
-  }
-})
 </script>
 
 <script setup lang="ts" generic="T extends TabsItem">
diff --git a/src/runtime/components/Toast.vue b/src/runtime/components/Toast.vue
index 5db1f9f4..10d991a0 100644
--- a/src/runtime/components/Toast.vue
+++ b/src/runtime/components/Toast.vue
@@ -4,7 +4,6 @@ import type { ToastRootProps, ToastRootEmits } from 'reka-ui'
 import type { AppConfig } from '@nuxt/schema'
 import _appConfig from '#build/app.config'
 import theme from '#build/ui/toast'
-import { extendDevtoolsMeta } from '../composables/extendDevtoolsMeta'
 import { tv } from '../utils/tv'
 import type { AvatarProps, ButtonProps } from '../types'
 import type { StringOrVNode } from '../types/utils'
@@ -58,8 +57,6 @@ export interface ToastSlots {
   actions(props?: {}): any
   close(props: { ui: any }): any
 }
-
-extendDevtoolsMeta<ToastProps>({ ignore: true })
 </script>
 
 <script setup lang="ts">
diff --git a/src/runtime/components/Toaster.vue b/src/runtime/components/Toaster.vue
index 9f12ab7a..c59c3890 100644
--- a/src/runtime/components/Toaster.vue
+++ b/src/runtime/components/Toaster.vue
@@ -4,7 +4,6 @@ import type { ToastProviderProps } from 'reka-ui'
 import type { AppConfig } from '@nuxt/schema'
 import _appConfig from '#build/app.config'
 import theme from '#build/ui/toaster'
-import { extendDevtoolsMeta } from '../composables/extendDevtoolsMeta'
 import { tv } from '../utils/tv'
 
 const appConfigToaster = _appConfig as AppConfig & { ui: { toaster: Partial<typeof theme> } }
@@ -36,8 +35,6 @@ export interface ToasterSlots {
 export default {
   name: 'Toaster'
 }
-
-extendDevtoolsMeta({ example: 'ToasterExample' })
 </script>
 
 <script setup lang="ts">
diff --git a/src/runtime/components/Tooltip.vue b/src/runtime/components/Tooltip.vue
index ba1a313e..6ce6970e 100644
--- a/src/runtime/components/Tooltip.vue
+++ b/src/runtime/components/Tooltip.vue
@@ -3,7 +3,6 @@ import type { TooltipRootProps, TooltipRootEmits, TooltipContentProps, TooltipAr
 import type { AppConfig } from '@nuxt/schema'
 import _appConfig from '#build/app.config'
 import theme from '#build/ui/tooltip'
-import { extendDevtoolsMeta } from '../composables/extendDevtoolsMeta'
 import { tv } from '../utils/tv'
 import type { KbdProps } from '../types'
 
@@ -41,8 +40,6 @@ export interface TooltipSlots {
   default(props: { open: boolean }): any
   content(props?: {}): any
 }
-
-extendDevtoolsMeta({ example: 'TooltipExample', defaultProps: { text: 'Hello world!' } })
 </script>
 
 <script setup lang="ts">
diff --git a/src/runtime/components/Tree.vue b/src/runtime/components/Tree.vue
index e0501b5d..64a8ccc3 100644
--- a/src/runtime/components/Tree.vue
+++ b/src/runtime/components/Tree.vue
@@ -4,7 +4,6 @@ import type { TreeRootProps, TreeRootEmits } from 'reka-ui'
 import type { AppConfig } from '@nuxt/schema'
 import _appConfig from '#build/app.config'
 import theme from '#build/ui/tree'
-import { extendDevtoolsMeta } from '../composables/extendDevtoolsMeta'
 import { tv } from '../utils/tv'
 import type { PartialString, DynamicSlots, MaybeMultipleModelValue, SelectItemKey } from '../types/utils'
 
@@ -83,41 +82,6 @@ export type TreeSlots<T extends { slot?: string }> = {
   'item-label': SlotProps<T>
   'item-trailing': SlotProps<T>
 } & DynamicSlots<T, SlotProps<T>>
-
-extendDevtoolsMeta({ defaultProps: {
-  items: [
-    {
-      label: 'app',
-      icon: 'i-lucide-folder',
-      defaultExpanded: true,
-      children: [{
-        label: 'composables',
-        icon: 'i-lucide-folder',
-        defaultExpanded: true,
-        children: [
-          { label: 'useAuth.ts', icon: 'vscode-icons:file-type-typescript' },
-          { label: 'useUser.ts', icon: 'vscode-icons:file-type-typescript' }
-        ]
-      },
-      {
-        label: 'components',
-        icon: 'i-lucide-folder',
-        children: [
-          {
-            label: 'Home',
-            icon: 'i-lucide-folder',
-            children: [
-              { label: 'Card.vue', icon: 'vscode-icons:file-type-vue' },
-              { label: 'Button.vue', icon: 'vscode-icons:file-type-vue' }
-            ]
-          }
-        ]
-      }]
-    },
-    { label: 'app.vue', icon: 'vscode-icons:file-type-vue' },
-    { label: 'nuxt.config.ts', icon: 'vscode-icons:file-type-nuxt' }
-  ]
-} })
 </script>
 
 <script setup lang="ts" generic="T extends TreeItem, M extends boolean = false, K extends SelectItemKey<T> | undefined = undefined">
diff --git a/src/runtime/composables/extendDevtoolsMeta.ts b/src/runtime/composables/extendDevtoolsMeta.ts
deleted file mode 100644
index 17b02513..00000000
--- a/src/runtime/composables/extendDevtoolsMeta.ts
+++ /dev/null
@@ -1,8 +0,0 @@
-export type DevtoolsMeta<T> = {
-  defaultProps?: T
-  example?: string
-  ignore?: boolean
-  ignoreProps?: string[]
-}
-
-export function extendDevtoolsMeta<T>(_meta: DevtoolsMeta<T>) { }
diff --git a/src/unplugin.ts b/src/unplugin.ts
index 9f72586b..138f3404 100644
--- a/src/unplugin.ts
+++ b/src/unplugin.ts
@@ -55,7 +55,7 @@ export interface NuxtUIOptions extends Omit<ModuleOptions, 'fonts' | 'colorMode'
 export const runtimeDir = normalize(fileURLToPath(new URL('./runtime', import.meta.url)))
 
 export const NuxtUIPlugin = createUnplugin<NuxtUIOptions | undefined>((_options = {}, meta) => {
-  const options = defu(_options, { fonts: false, devtools: { enabled: false } }, defaultOptions)
+  const options = defu(_options, { fonts: false }, defaultOptions)
 
   options.theme = options.theme || {}
   options.theme.colors = resolveColors(options.theme.colors)
diff --git a/tsconfig.json b/tsconfig.json
index 804c292c..f537e877 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -1,5 +1,5 @@
 {
   // https://nuxt.com/docs/guide/concepts/typescript
   "extends": "./.nuxt/tsconfig.json",
-  "exclude": ["cli", "docs", "dist", "playground", "devtools", "node_modules"]
+  "exclude": ["cli", "docs", "dist", "playground", "node_modules"]
 }