From 701c75a2a88a29be2fce193f75e1484799a5539c Mon Sep 17 00:00:00 2001
From: Romain Hamel <rom.hml@gmail.com>
Date: Tue, 5 Nov 2024 22:17:56 +0100
Subject: [PATCH] feat(module): devtools integration (#2196)

Co-authored-by: Benjamin Canac <canacb1@gmail.com>
---
 .github/workflows/ci-v3.yml                   |   3 +
 .gitignore                                    |   3 +
 build.config.ts                               |   6 +-
 devtools/app/app.config.ts                    |   8 +
 devtools/app/app.vue                          | 222 ++++++++++++++++++
 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/plugins/prettier.ts                  |  34 ++-
 docs/app/workers/prettier.js                  |  19 +-
 eslint.config.mjs                             |   2 +
 package.json                                  |  14 +-
 playground/app/app.vue                        |  33 +--
 playground/nuxt.config.ts                     |  27 ++-
 pnpm-lock.yaml                                |  30 +++
 pnpm-workspace.yaml                           |   1 +
 src/defaults.ts                               |   3 +
 src/devtools/meta.ts                          | 148 ++++++++++++
 src/devtools/runtime/DevtoolsRenderer.vue     |  71 ++++++
 .../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/ToasterExample.vue       |  11 +
 .../runtime/examples/TooltipExample.vue       |   5 +
 src/module.ts                                 |  92 +++++++-
 src/runtime/components/Accordion.vue          |  32 ++-
 src/runtime/components/Alert.vue              |   3 +
 src/runtime/components/App.vue                |   8 +
 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             |   6 +-
 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/Switch.vue             |   3 +
 src/runtime/components/Tabs.vue               |  19 +-
 src/runtime/components/Toast.vue              |   3 +
 src/runtime/components/Toaster.vue            |   7 +
 src/runtime/components/Tooltip.vue            |   3 +
 src/runtime/composables/extendDevtoolsMeta.ts |   8 +
 src/templates.ts                              |   7 +
 src/unplugin.ts                               |   2 +-
 tsconfig.json                                 |   2 +-
 100 files changed, 2062 insertions(+), 59 deletions(-)
 create mode 100644 devtools/app/app.config.ts
 create mode 100644 devtools/app/app.vue
 create mode 100644 devtools/app/components/CollapseContainer.vue
 create mode 100644 devtools/app/components/ComponentPreview.vue
 create mode 100644 devtools/app/components/ComponentPropInput.vue
 create mode 100644 devtools/app/components/UILogo.vue
 create mode 100644 devtools/app/components/inputs/ArrayInput.vue
 create mode 100644 devtools/app/components/inputs/BooleanInput.vue
 create mode 100644 devtools/app/components/inputs/NumberInput.vue
 create mode 100644 devtools/app/components/inputs/ObjectInput.vue
 create mode 100644 devtools/app/components/inputs/StringEnumInput.vue
 create mode 100644 devtools/app/components/inputs/StringInput.vue
 create mode 100644 devtools/app/composables/usePropSchema.ts
 create mode 100644 devtools/app/composables/useShiki.ts
 create mode 100644 devtools/app/plugins/prettier.client.ts
 create mode 100644 devtools/app/workers/prettier.js
 create mode 100644 devtools/nuxt.config.ts
 create mode 100644 devtools/package.json
 create mode 100644 devtools/public/favicon.svg
 create mode 100644 devtools/test/composables/usePropSchema.test.ts
 create mode 100644 devtools/test/fixtures/schemas.ts
 create mode 100644 devtools/test/vitest.config.ts
 create mode 100644 devtools/tsconfig.json
 create mode 100644 src/devtools/meta.ts
 create mode 100644 src/devtools/runtime/DevtoolsRenderer.vue
 create mode 100644 src/devtools/runtime/examples/AvatarGroupExample.vue
 create mode 100644 src/devtools/runtime/examples/ButtonGroupExample.vue
 create mode 100644 src/devtools/runtime/examples/CardExample.vue
 create mode 100644 src/devtools/runtime/examples/CarouselExample.vue
 create mode 100644 src/devtools/runtime/examples/ChipExample.vue
 create mode 100644 src/devtools/runtime/examples/CollapsibleExample.vue
 create mode 100644 src/devtools/runtime/examples/CommandPaletteExample.vue
 create mode 100644 src/devtools/runtime/examples/ContainerExample.vue
 create mode 100644 src/devtools/runtime/examples/ContextMenuExample.vue
 create mode 100644 src/devtools/runtime/examples/DrawerExample.vue
 create mode 100644 src/devtools/runtime/examples/DropdownMenuExample.vue
 create mode 100644 src/devtools/runtime/examples/FormExample.vue
 create mode 100644 src/devtools/runtime/examples/FormFieldExample.vue
 create mode 100644 src/devtools/runtime/examples/LinkExample.vue
 create mode 100644 src/devtools/runtime/examples/ModalExample.vue
 create mode 100644 src/devtools/runtime/examples/PopoverExample.vue
 create mode 100644 src/devtools/runtime/examples/SkeletonExample.vue
 create mode 100644 src/devtools/runtime/examples/SlideoverExample.vue
 create mode 100644 src/devtools/runtime/examples/ToasterExample.vue
 create mode 100644 src/devtools/runtime/examples/TooltipExample.vue
 create mode 100644 src/runtime/composables/extendDevtoolsMeta.ts

diff --git a/.github/workflows/ci-v3.yml b/.github/workflows/ci-v3.yml
index 4d0019ad..cea46b4a 100644
--- a/.github/workflows/ci-v3.yml
+++ b/.github/workflows/ci-v3.yml
@@ -43,6 +43,9 @@ 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/.gitignore b/.gitignore
index 96dceea8..0a82abf6 100644
--- a/.gitignore
+++ b/.gitignore
@@ -1,3 +1,6 @@
+.component-meta/
+component-meta.*
+
 # Nuxt dev/build outputs
 .output
 .data
diff --git a/build.config.ts b/build.config.ts
index 6373e67a..fef778b4 100644
--- a/build.config.ts
+++ b/build.config.ts
@@ -2,6 +2,9 @@ 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'
   ],
@@ -9,7 +12,8 @@ export default defineBuildConfig({
     emitCJS: true
   },
   replace: {
-    'process.env.DEV': 'false'
+    'process.env.DEV': 'false',
+    'process.env.NUXT_UI_DEVTOOLS_LOCAL': 'false'
   },
   hooks: {
     'mkdist:entry:options'(ctx, entry, options) {
diff --git a/devtools/app/app.config.ts b/devtools/app/app.config.ts
new file mode 100644
index 00000000..aec89678
--- /dev/null
+++ b/devtools/app/app.config.ts
@@ -0,0 +1,8 @@
+export default defineAppConfig({
+  ui: {
+    colors: {
+      primary: 'green',
+      neutral: 'zinc'
+    }
+  }
+})
diff --git a/devtools/app/app.vue b/devtools/app/app.vue
new file mode 100644
index 00000000..941a414c
--- /dev/null
+++ b/devtools/app/app.vue
@@ -0,0 +1,222 @@
+<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-heroicons-cog-6-tooth', 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 class="flex justify-center items-center h-screen w-full relative font-sans">
+    <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-[var(--ui-color-error-500)]">
+        <UILogo class="h-8" />
+        <UIcon name="i-heroicons-exclamation-circle" 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-[var(--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-heroicons-magnifying-glass"
+        />
+
+        <div class="absolute top-[49px] bottom-0 inset-x-0 grid xl:grid-cols-8 grid-cols-4 bg-[var(--ui-bg)]">
+          <div class="col-span-1 border-r border-[var(--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-heroicons-moon-20-solid' : 'i-heroicons-sun-20-solid'"
+                variant="ghost"
+                color="neutral"
+                @click="isDark = !isDark"
+              />
+              <UButton
+                v-if="component"
+                variant="ghost"
+                color="neutral"
+                icon="i-heroicons-arrow-top-right-on-square"
+                @click="openDocs()"
+              >
+                Open docs
+              </UButton>
+            </div>
+          </div>
+
+          <div class="border-l border-[var(--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-[var(--ui-bg)] z-50' }">
+              <template #props>
+                <div v-for="prop in componentPropsMeta" :key="'prop-' + prop.name" class="px-3 py-5 border-b border-[var(--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-family-sans: 'DM Sans', sans-serif;
+
+  --color-primary-50: var(--ui-color-primary-50);
+  --color-primary-100: var(--ui-color-primary-100);
+  --color-primary-200: var(--ui-color-primary-200);
+  --color-primary-300: var(--ui-color-primary-300);
+  --color-primary-400: var(--ui-color-primary-400);
+  --color-primary-500: var(--ui-color-primary-500);
+  --color-primary-600: var(--ui-color-primary-600);
+  --color-primary-700: var(--ui-color-primary-700);
+  --color-primary-800: var(--ui-color-primary-800);
+  --color-primary-900: var(--ui-color-primary-900);
+  --color-primary-950: var(--ui-color-primary-950);
+
+  --color-neutral-50: var(--ui-color-neutral-50);
+  --color-neutral-100: var(--ui-color-neutral-100);
+  --color-neutral-200: var(--ui-color-neutral-200);
+  --color-neutral-300: var(--ui-color-neutral-300);
+  --color-neutral-400: var(--ui-color-neutral-400);
+  --color-neutral-500: var(--ui-color-neutral-500);
+  --color-neutral-600: var(--ui-color-neutral-600);
+  --color-neutral-700: var(--ui-color-neutral-700);
+  --color-neutral-800: var(--ui-color-neutral-800);
+  --color-neutral-900: var(--ui-color-neutral-900);
+  --color-neutral-950: var(--ui-color-neutral-950);
+}
+
+:root {
+  --ui-border: var(--ui-color-neutral-200);
+  --ui-bg: white;
+}
+
+.dark {
+  --ui-border: var(--ui-color-neutral-800);
+  --ui-bg: var(--ui-color-neutral-900);
+}
+
+.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
new file mode 100644
index 00000000..6b110330
--- /dev/null
+++ b/devtools/app/components/CollapseContainer.vue
@@ -0,0 +1,43 @@
+<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 border-[var(--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-[var(--ui-bg)] group w-full flex justify-center my-1 border-t border-[var(--ui-border)] rounded-t-none"
+      variant="link"
+      color="neutral"
+      trailing-icon="i-heroicons-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
new file mode 100644
index 00000000..fdc2ff4c
--- /dev/null
+++ b/devtools/app/components/ComponentPreview.vue
@@ -0,0 +1,151 @@
+<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-heroicons-exclamation-circle">
+        <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-lg border border-[var(--ui-border)] bg-neutral-50 dark:bg-neutral-800" v-html="highlightedCode" />
+      <UButton
+        color="neutral"
+        variant="link"
+        :icon="copied ? 'i-heroicons-clipboard-document-check' : 'i-heroicons-clipboard-document'"
+        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
new file mode 100644
index 00000000..ac50cf8b
--- /dev/null
+++ b/devtools/app/components/ComponentPropInput.vue
@@ -0,0 +1,39 @@
+<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-[var(--ui-bg-elevated)] px-1 py-0.5 rounded">$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-[var(--ui-border-accented)] border-dashed rounded bg-[var(--ui-bg-elevated)]">
+        {{ meta?.name }}
+      </p>
+    </template>
+
+    <template #description>
+      <!-- eslint-disable vue/no-v-html -->
+      <p v-if="meta.description" class="text-neutral-600 dark:text-neutral-400 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
new file mode 100644
index 00000000..2153c800
--- /dev/null
+++ b/devtools/app/components/UILogo.vue
@@ -0,0 +1,10 @@
+<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-[var(--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-color-primary-500)" /><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-color-primary-500)" /><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-color-primary-500)" /></svg>
+</template>
diff --git a/devtools/app/components/inputs/ArrayInput.vue b/devtools/app/components/inputs/ArrayInput.vue
new file mode 100644
index 00000000..c7991573
--- /dev/null
+++ b/devtools/app/components/inputs/ArrayInput.vue
@@ -0,0 +1,76 @@
+<script lang="ts">
+import { 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-heroicons-ellipsis-vertical" class="absolute top-4 right-1" />
+        <template #content>
+          <UButton
+            variant="ghost"
+            color="error"
+            icon="i-heroicons-trash"
+            block
+            @click="removeArrayItem(index)"
+          >
+            Remove
+          </UButton>
+        </template>
+      </UPopover>
+    </div>
+
+    <UButton
+      icon="i-heroicons-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
new file mode 100644
index 00000000..b94788a0
--- /dev/null
+++ b/devtools/app/components/inputs/BooleanInput.vue
@@ -0,0 +1,20 @@
+<script lang="ts">
+import { 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
new file mode 100644
index 00000000..4486c485
--- /dev/null
+++ b/devtools/app/components/inputs/NumberInput.vue
@@ -0,0 +1,15 @@
+<script lang="ts">
+import { 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
new file mode 100644
index 00000000..a868f640
--- /dev/null
+++ b/devtools/app/components/inputs/ObjectInput.vue
@@ -0,0 +1,38 @@
+<script lang="ts">
+import { 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-[var(--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
new file mode 100644
index 00000000..aadb6959
--- /dev/null
+++ b/devtools/app/components/inputs/StringEnumInput.vue
@@ -0,0 +1,60 @@
+<script lang="ts">
+import { 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
new file mode 100644
index 00000000..a1d1a883
--- /dev/null
+++ b/devtools/app/components/inputs/StringInput.vue
@@ -0,0 +1,15 @@
+<script lang="ts">
+import { 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
new file mode 100644
index 00000000..8c9b529b
--- /dev/null
+++ b/devtools/app/composables/usePropSchema.ts
@@ -0,0 +1,44 @@
+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
new file mode 100644
index 00000000..1ce505f7
--- /dev/null
+++ b/devtools/app/composables/useShiki.ts
@@ -0,0 +1,34 @@
+import { createHighlighterCore } from 'shiki/core'
+import type { BuiltinLanguage, HighlighterCore } from 'shiki'
+import loadWasm from 'shiki/wasm'
+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'
+
+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],
+        loadWasm
+      })
+    }
+
+    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
new file mode 100644
index 00000000..70a0b964
--- /dev/null
+++ b/devtools/app/plugins/prettier.client.ts
@@ -0,0 +1,54 @@
+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
new file mode 100644
index 00000000..873541ef
--- /dev/null
+++ b/devtools/app/workers/prettier.js
@@ -0,0 +1,36 @@
+/* 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.3.3/standalone.js'),
+      import('https://unpkg.com/prettier@3.3.3/plugins/html.js'),
+      import('https://unpkg.com/prettier@3.3.3/plugins/postcss.js'),
+      import('https://unpkg.com/prettier@3.3.3/plugins/babel.js'),
+      import('https://unpkg.com/prettier@3.3.3/plugins/estree.js'),
+      import('https://unpkg.com/prettier@3.3.3/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
new file mode 100644
index 00000000..a7ef7a41
--- /dev/null
+++ b/devtools/nuxt.config.ts
@@ -0,0 +1,38 @@
+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
new file mode 100644
index 00000000..c28edcd3
--- /dev/null
+++ b/devtools/package.json
@@ -0,0 +1,19 @@
+{
+  "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.1.0",
+    "nuxt": "^3.13.1",
+    "prettier": "^3.3.3",
+    "zod": "^3.23.8"
+  }
+}
diff --git a/devtools/public/favicon.svg b/devtools/public/favicon.svg
new file mode 100644
index 00000000..20be0c71
--- /dev/null
+++ b/devtools/public/favicon.svg
@@ -0,0 +1 @@
+<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
new file mode 100644
index 00000000..68c102d4
--- /dev/null
+++ b/devtools/test/composables/usePropSchema.test.ts
@@ -0,0 +1,24 @@
+// @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
new file mode 100644
index 00000000..bc33a14e
--- /dev/null
+++ b/devtools/test/fixtures/schemas.ts
@@ -0,0 +1,133 @@
+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
new file mode 100644
index 00000000..d297d232
--- /dev/null
+++ b/devtools/test/vitest.config.ts
@@ -0,0 +1,7 @@
+import { defineVitestConfig } from '@nuxt/test-utils/config'
+
+export default defineVitestConfig({
+  test: {
+    environment: 'nuxt'
+  }
+})
diff --git a/devtools/tsconfig.json b/devtools/tsconfig.json
new file mode 100644
index 00000000..a746f2a7
--- /dev/null
+++ b/devtools/tsconfig.json
@@ -0,0 +1,4 @@
+{
+  // https://nuxt.com/docs/guide/concepts/typescript
+  "extends": "./.nuxt/tsconfig.json"
+}
diff --git a/docs/app/plugins/prettier.ts b/docs/app/plugins/prettier.ts
index 013cab61..01ab19e5 100644
--- a/docs/app/plugins/prettier.ts
+++ b/docs/app/plugins/prettier.ts
@@ -43,27 +43,25 @@ function createPrettierWorkerApi(worker: Worker): SimplePrettier {
   }
 }
 
-export default defineNuxtPlugin({
-  async setup() {
-    let prettier: SimplePrettier
-    if (import.meta.server) {
-      const prettierModule = await import('prettier')
-      prettier = {
-        format(source, options = {}) {
-          return prettierModule.format(source, defu(options, {
-            parser: 'markdown'
-          }))
-        }
+export default defineNuxtPlugin(async () => {
+  let prettier: SimplePrettier
+  if (import.meta.server) {
+    const prettierModule = await import('prettier')
+    prettier = {
+      format(source, options = {}) {
+        return prettierModule.format(source, defu(options, {
+          parser: 'markdown'
+        }))
       }
-    } else {
-      const worker = new PrettierWorker()
-      prettier = createPrettierWorkerApi(worker)
     }
+  } else {
+    const worker = new PrettierWorker()
+    prettier = createPrettierWorkerApi(worker)
+  }
 
-    return {
-      provide: {
-        prettier
-      }
+  return {
+    provide: {
+      prettier
     }
   }
 })
diff --git a/docs/app/workers/prettier.js b/docs/app/workers/prettier.js
index d44d7b53..7ac34450 100644
--- a/docs/app/workers/prettier.js
+++ b/docs/app/workers/prettier.js
@@ -1,11 +1,4 @@
 /* eslint-disable no-undef */
-import('https://unpkg.com/prettier@3.3.3/standalone.js')
-import('https://unpkg.com/prettier@3.3.3/plugins/babel.js')
-import('https://unpkg.com/prettier@3.3.3/plugins/estree.js')
-import('https://unpkg.com/prettier@3.3.3/plugins/html.js')
-import('https://unpkg.com/prettier@3.3.3/plugins/markdown.js')
-import('https://unpkg.com/prettier@3.3.3/plugins/typescript.js')
-
 self.onmessage = async function (event) {
   self.postMessage({
     uid: event.data.uid,
@@ -21,8 +14,18 @@ function handleMessage(message) {
 }
 
 async function handleFormatMessage(message) {
-  const { options, source } = message
+  if (!globalThis.prettier) {
+    await Promise.all([
+      import('https://unpkg.com/prettier@3.3.3/standalone.js'),
+      import('https://unpkg.com/prettier@3.3.3/plugins/babel.js'),
+      import('https://unpkg.com/prettier@3.3.3/plugins/estree.js'),
+      import('https://unpkg.com/prettier@3.3.3/plugins/html.js'),
+      import('https://unpkg.com/prettier@3.3.3/plugins/markdown.js'),
+      import('https://unpkg.com/prettier@3.3.3/plugins/typescript.js')
+    ])
+  }
 
+  const { options, source } = message
   const formatted = await prettier.format(source, {
     parser: 'markdown',
     plugins: prettierPlugins,
diff --git a/eslint.config.mjs b/eslint.config.mjs
index 7844e440..41fe1a28 100644
--- a/eslint.config.mjs
+++ b/eslint.config.mjs
@@ -16,4 +16,6 @@ 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 f7f1db38..68bfaab4 100644
--- a/package.json
+++ b/package.json
@@ -48,23 +48,27 @@
     "vue-plugin.d.ts"
   ],
   "scripts": {
-    "build": "nuxt-module-build build",
+    "build": "nuxt-module-build build && pnpm devtools:build",
     "prepack": "pnpm build",
     "dev": "DEV=true nuxi dev playground",
     "dev:build": "nuxi build playground",
-    "dev:prepare": "nuxt-module-build build --stub && nuxt-module-build prepare && nuxi prepare playground && nuxi prepare docs && vite build playground-vue",
+    "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": "nuxt-component-meta playground --outputDir ../src/devtools/.component-meta/",
     "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 && cd playground-vue && vue-tsc --noEmit",
+    "typecheck": "vue-tsc --noEmit && nuxi typecheck playground && nuxi typecheck docs && nuxi typecheck devtools && cd playground-vue && vue-tsc --noEmit",
     "test": "vitest",
     "test:vue": "vitest -c vitest.vue.config.ts",
     "release": "release-it --preRelease=alpha --npm.tag=next"
   },
   "dependencies": {
     "@iconify/vue": "^4.1.2",
+    "@nuxt/devtools-kit": "^1.6.0",
     "@nuxt/fonts": "^0.10.2",
     "@nuxt/icon": "^1.6.1",
     "@nuxt/kit": "^3.14.0",
@@ -87,6 +91,7 @@
     "embla-carousel-wheel-gestures": "^8.0.1",
     "fast-deep-equal": "^3.1.3",
     "fuse.js": "^7.0.0",
+    "get-port-please": "^3.1.2",
     "knitwork": "^1.1.0",
     "magic-string": "^0.30.12",
     "mlly": "^1.7.2",
@@ -94,6 +99,7 @@
     "pathe": "^1.1.2",
     "radix-vue": "^1.9.8",
     "scule": "^1.3.0",
+    "sirv": "^2.0.4",
     "tailwind-variants": "^0.2.1",
     "tailwindcss": "4.0.0-alpha.30",
     "tinyglobby": "^0.2.10",
@@ -113,7 +119,9 @@
     "eslint": "^9.14.0",
     "happy-dom": "^15.7.4",
     "joi": "^17.13.3",
+    "knitwork": "^1.1.0",
     "nuxt": "^3.14.0",
+    "nuxt-component-meta": "^0.9.0",
     "release-it": "^17.10.0",
     "superstruct": "^2.0.2",
     "valibot": "^0.42.1",
diff --git a/playground/app/app.vue b/playground/app/app.vue
index 673475af..88d97b59 100644
--- a/playground/app/app.vue
+++ b/playground/app/app.vue
@@ -66,22 +66,27 @@ defineShortcuts({
 </script>
 
 <template>
-  <UApp :toaster="appConfig.toaster">
-    <div class="h-screen w-screen overflow-hidden flex flex-col lg:flex-row min-h-0 bg-[var(--ui-bg)]" vaul-drawer-wrapper>
-      <UNavigationMenu :items="items" orientation="vertical" class="hidden lg:flex border-e border-[var(--ui-border)] overflow-y-auto w-48 p-4" />
-      <UNavigationMenu :items="items" orientation="horizontal" class="lg:hidden border-b border-[var(--ui-border)] overflow-x-auto" />
+  <template v-if="!$route.path.startsWith('/__nuxt_ui__')">
+    <UApp :toaster="appConfig.toaster">
+      <div class="h-screen w-screen overflow-hidden flex flex-col lg:flex-row min-h-0 bg-[var(--ui-bg)]" vaul-drawer-wrapper>
+        <UNavigationMenu :items="items" orientation="vertical" class="hidden lg:flex border-e border-[var(--ui-border)] overflow-y-auto w-48 p-4" />
+        <UNavigationMenu :items="items" orientation="horizontal" class="lg:hidden border-b border-[var(--ui-border)] overflow-x-auto" />
 
-      <div class="flex-1 flex flex-col items-center justify-around overflow-y-auto w-full py-12 px-4">
-        <NuxtPage />
+        <div class="flex-1 flex flex-col items-center justify-around overflow-y-auto w-full py-12 px-4">
+          <NuxtPage />
+        </div>
+
+        <UModal v-model:open="isCommandPaletteOpen" class="sm:h-96">
+          <template #content>
+            <UCommandPalette placeholder="Search a component..." :groups="[{ id: 'items', items }]" :fuse="{ resultLimit: 100 }" @update:model-value="onSelect" @update:open="value => isCommandPaletteOpen = value" />
+          </template>
+        </UModal>
       </div>
-    </div>
-
-    <UModal v-model:open="isCommandPaletteOpen" class="sm:h-96">
-      <template #content>
-        <UCommandPalette placeholder="Search a component..." :groups="[{ id: 'items', items }]" :fuse="{ resultLimit: 100 }" @update:model-value="onSelect" @update:open="value => isCommandPaletteOpen = value" />
-      </template>
-    </UModal>
-  </UApp>
+    </UApp>
+  </template>
+  <template v-else>
+    <NuxtPage />
+  </template>
 </template>
 
 <style>
diff --git a/playground/nuxt.config.ts b/playground/nuxt.config.ts
index 3d375bb7..48c2f8b5 100644
--- a/playground/nuxt.config.ts
+++ b/playground/nuxt.config.ts
@@ -1,10 +1,33 @@
-// https://nuxt.com/docs/api/configuration/nuxt-config
+import { createResolver } from '@nuxt/kit'
+
+const { resolve } = createResolver(import.meta.url)
+
 export default defineNuxtConfig({
+
   modules: ['../src/module'],
+  devtools: { enabled: true },
+
+  ui: {
+    fonts: false
+  },
 
   future: {
     compatibilityVersion: 4
   },
 
-  compatibilityDate: '2024-07-09'
+  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
+    }
+  }
 })
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 1dcbbf96..b21f2c34 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -16,6 +16,9 @@ importers:
       '@iconify/vue':
         specifier: ^4.1.2
         version: 4.1.2(vue@3.5.12(typescript@5.6.3))
+      '@nuxt/devtools-kit':
+        specifier: ^1.6.0
+        version: 1.6.0(magicast@0.3.5)(rollup@4.24.4)(vite@5.4.10(@types/node@22.8.7)(lightningcss@1.28.1)(terser@5.36.0))
       '@nuxt/fonts':
         specifier: ^0.10.2
         version: 0.10.2(ioredis@5.4.1)(magicast@0.3.5)(rollup@4.24.4)(vite@5.4.10(@types/node@22.8.7)(lightningcss@1.28.1)(terser@5.36.0))
@@ -82,6 +85,9 @@ importers:
       fuse.js:
         specifier: ^7.0.0
         version: 7.0.0
+      get-port-please:
+        specifier: ^3.1.2
+        version: 3.1.2
       knitwork:
         specifier: ^1.1.0
         version: 1.1.0
@@ -103,6 +109,9 @@ importers:
       scule:
         specifier: ^1.3.0
         version: 1.3.0
+      sirv:
+        specifier: ^2.0.4
+        version: 2.0.4
       tailwind-variants:
         specifier: ^0.2.1
         version: 0.2.1(tailwindcss@4.0.0-alpha.30)
@@ -161,6 +170,9 @@ importers:
       nuxt:
         specifier: ^3.14.0
         version: 3.14.0(@parcel/watcher@2.5.0)(@types/node@22.8.7)(better-sqlite3@11.5.0)(eslint@9.14.0(jiti@2.4.0))(ioredis@5.4.1)(lightningcss@1.28.1)(magicast@0.3.5)(optionator@0.9.4)(rollup@4.24.4)(terser@5.36.0)(typescript@5.6.3)(vite@5.4.10(@types/node@22.8.7)(lightningcss@1.28.1)(terser@5.36.0))(vue-tsc@2.1.10(typescript@5.6.3))
+      nuxt-component-meta:
+        specifier: ^0.9.0
+        version: 0.9.0(magicast@0.3.5)(rollup@4.24.4)
       release-it:
         specifier: ^17.10.0
         version: 17.10.0(typescript@5.6.3)
@@ -201,6 +213,24 @@ importers:
         specifier: ^1.3.0
         version: 1.3.0
 
+  devtools:
+    dependencies:
+      '@nuxt/ui':
+        specifier: workspace:*
+        version: link:..
+      knitwork:
+        specifier: ^1.1.0
+        version: 1.1.0
+      nuxt:
+        specifier: ^3.13.1
+        version: 3.14.0(@parcel/watcher@2.5.0)(@types/node@22.8.7)(better-sqlite3@11.5.0)(eslint@9.14.0(jiti@2.4.0))(ioredis@5.4.1)(lightningcss@1.28.1)(magicast@0.3.5)(optionator@0.9.4)(rollup@4.24.4)(terser@5.36.0)(typescript@5.6.3)(vite@5.4.10(@types/node@22.8.7)(lightningcss@1.28.1)(terser@5.36.0))(vue-tsc@2.1.10(typescript@5.6.3))
+      prettier:
+        specifier: ^3.3.3
+        version: 3.3.3
+      zod:
+        specifier: ^3.23.8
+        version: 3.23.8
+
   docs:
     dependencies:
       '@iconify-json/heroicons':
diff --git a/pnpm-workspace.yaml b/pnpm-workspace.yaml
index 7dd585fd..84024be0 100644
--- a/pnpm-workspace.yaml
+++ b/pnpm-workspace.yaml
@@ -2,5 +2,6 @@ packages:
   - "./"
   - "cli"
   - "docs"
+  - "devtools"
   - "playground"
   - "playground-vue"
diff --git a/src/defaults.ts b/src/defaults.ts
index 0a88d6a6..ccc44df7 100644
--- a/src/defaults.ts
+++ b/src/defaults.ts
@@ -22,6 +22,9 @@ export const defaultOptions = {
   theme: {
     colors: undefined,
     transitions: true
+  },
+  devtools: {
+    enabled: true
   }
 }
 
diff --git a/src/devtools/meta.ts b/src/devtools/meta.ts
new file mode 100644
index 00000000..fa48a29e
--- /dev/null
+++ b/src/devtools/meta.ts
@@ -0,0 +1,148 @@
+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?.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
new file mode 100644
index 00000000..9efe97b0
--- /dev/null
+++ b/src/devtools/runtime/DevtoolsRenderer.vue
@@ -0,0 +1,71 @@
+<script setup lang="ts">
+import { onUnmounted, onMounted, reactive } from 'vue'
+import { pascalCase } from 'scule'
+import { defineAsyncComponent, useColorMode, useRoute } from '#imports'
+
+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 colorMode = useColorMode()
+function setColorMode(event: Event & { isDark?: boolean }) {
+  colorMode.preference = 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
new file mode 100644
index 00000000..805b964a
--- /dev/null
+++ b/src/devtools/runtime/examples/AvatarGroupExample.vue
@@ -0,0 +1,7 @@
+<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
new file mode 100644
index 00000000..54d04c97
--- /dev/null
+++ b/src/devtools/runtime/examples/ButtonGroupExample.vue
@@ -0,0 +1,8 @@
+<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
new file mode 100644
index 00000000..24fc5401
--- /dev/null
+++ b/src/devtools/runtime/examples/CardExample.vue
@@ -0,0 +1,13 @@
+<template>
+  <div class="flex flex-col gap-4">
+    <UCard class="w-96">
+      <template #header>
+        <div class="bg-[var(--ui-bg-accented)]/40 h-8" />
+      </template>
+      <div class="bg-[var(--ui-bg-accented)]/40 h-32" />
+      <template #footer>
+        <div class="bg-[var(--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
new file mode 100644
index 00000000..f038abd5
--- /dev/null
+++ b/src/devtools/runtime/examples/CarouselExample.vue
@@ -0,0 +1,13 @@
+<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
new file mode 100644
index 00000000..c0c05fdc
--- /dev/null
+++ b/src/devtools/runtime/examples/ChipExample.vue
@@ -0,0 +1,5 @@
+<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
new file mode 100644
index 00000000..8ec689ed
--- /dev/null
+++ b/src/devtools/runtime/examples/CollapsibleExample.vue
@@ -0,0 +1,8 @@
+<template>
+  <UCollapsible class="w-48">
+    <UButton label="Open Collapse" block />
+    <template #content>
+      <div class="bg-[var(--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
new file mode 100644
index 00000000..7601845e
--- /dev/null
+++ b/src/devtools/runtime/examples/CommandPaletteExample.vue
@@ -0,0 +1,29 @@
+<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-heroicons-document-plus'
+  }, {
+    label: 'Add new folder',
+    suffix: 'Create a new folder in the current directory or workspace.',
+    icon: 'i-heroicons-folder-plus',
+    kbds: ['meta', 'F']
+  }, {
+    label: 'Add hashtag',
+    suffix: 'Add a hashtag to the current item.',
+    icon: 'i-heroicons-hashtag',
+    kbds: ['meta', 'H']
+  }, {
+    label: 'Add label',
+    suffix: 'Add a label to the current item.',
+    icon: 'i-heroicons-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
new file mode 100644
index 00000000..8a1b2932
--- /dev/null
+++ b/src/devtools/runtime/examples/ContainerExample.vue
@@ -0,0 +1,5 @@
+<template>
+  <UContainer>
+    <div class="bg-[var(--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
new file mode 100644
index 00000000..fd17434b
--- /dev/null
+++ b/src/devtools/runtime/examples/ContextMenuExample.vue
@@ -0,0 +1,5 @@
+<template>
+  <UContextMenu>
+    <div class="bg-[var(--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
new file mode 100644
index 00000000..125804e6
--- /dev/null
+++ b/src/devtools/runtime/examples/DrawerExample.vue
@@ -0,0 +1,8 @@
+<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
new file mode 100644
index 00000000..49cc937e
--- /dev/null
+++ b/src/devtools/runtime/examples/DropdownMenuExample.vue
@@ -0,0 +1,5 @@
+<template>
+  <UDropdownMenu>
+    <UButton label="Open Dropdown" />
+  </UDropdownMenu>
+</template>
diff --git a/src/devtools/runtime/examples/FormExample.vue b/src/devtools/runtime/examples/FormExample.vue
new file mode 100644
index 00000000..199afddd
--- /dev/null
+++ b/src/devtools/runtime/examples/FormExample.vue
@@ -0,0 +1,30 @@
+<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
new file mode 100644
index 00000000..a0be07b1
--- /dev/null
+++ b/src/devtools/runtime/examples/FormFieldExample.vue
@@ -0,0 +1,5 @@
+<template>
+  <UFormField>
+    <UInput />
+  </UFormField>
+</template>
diff --git a/src/devtools/runtime/examples/LinkExample.vue b/src/devtools/runtime/examples/LinkExample.vue
new file mode 100644
index 00000000..e5cbd6bc
--- /dev/null
+++ b/src/devtools/runtime/examples/LinkExample.vue
@@ -0,0 +1,5 @@
+<template>
+  <ULink>
+    Link
+  </ULink>
+</template>
diff --git a/src/devtools/runtime/examples/ModalExample.vue b/src/devtools/runtime/examples/ModalExample.vue
new file mode 100644
index 00000000..d4c6ef2c
--- /dev/null
+++ b/src/devtools/runtime/examples/ModalExample.vue
@@ -0,0 +1,8 @@
+<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
new file mode 100644
index 00000000..aac4e502
--- /dev/null
+++ b/src/devtools/runtime/examples/PopoverExample.vue
@@ -0,0 +1,8 @@
+<template>
+  <UPopover>
+    <UButton label="Open Collapse" />
+    <template #content>
+      <div class="bg-[var(--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
new file mode 100644
index 00000000..5b2fab1e
--- /dev/null
+++ b/src/devtools/runtime/examples/SkeletonExample.vue
@@ -0,0 +1,3 @@
+<template>
+  <USkeleton class="h-32 w-96" />
+</template>
diff --git a/src/devtools/runtime/examples/SlideoverExample.vue b/src/devtools/runtime/examples/SlideoverExample.vue
new file mode 100644
index 00000000..79a07dc7
--- /dev/null
+++ b/src/devtools/runtime/examples/SlideoverExample.vue
@@ -0,0 +1,8 @@
+<template>
+  <USlideover>
+    <UButton label="Open Slideover" />
+    <template #body>
+      <div class="size-96" />
+    </template>
+  </USlideover>
+</template>
diff --git a/src/devtools/runtime/examples/ToasterExample.vue b/src/devtools/runtime/examples/ToasterExample.vue
new file mode 100644
index 00000000..96e97536
--- /dev/null
+++ b/src/devtools/runtime/examples/ToasterExample.vue
@@ -0,0 +1,11 @@
+<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
new file mode 100644
index 00000000..f014c154
--- /dev/null
+++ b/src/devtools/runtime/examples/TooltipExample.vue
@@ -0,0 +1,5 @@
+<template>
+  <UTooltip>
+    <div class="bg-[var(--ui-bg-accented)]/40 size-20" />
+  </UTooltip>
+</template>
diff --git a/src/module.ts b/src/module.ts
index 648af9de..7c0d6849 100644
--- a/src/module.ts
+++ b/src/module.ts
@@ -1,6 +1,10 @@
 import { defu } from 'defu'
-import { createResolver, defineNuxtModule, addComponentsDir, addImportsDir, addVitePlugin, addPlugin, installModule, hasNuxtModule } from '@nuxt/kit'
-import { addTemplates } from './templates'
+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 { defaultOptions, getDefaultUiConfig, resolveColors } from './defaults'
 
 export type * from './runtime/types'
@@ -46,6 +50,17 @@ 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>({
@@ -58,6 +73,7 @@ export default defineNuxtModule<ModuleOptions>({
     docs: 'https://ui3.nuxt.dev/getting-started/installation'
   },
   defaults: defaultOptions,
+
   async setup(options, nuxt) {
     const { resolve } = createResolver(import.meta.url)
 
@@ -110,5 +126,77 @@ export default defineNuxtModule<ModuleOptions>({
     addImportsDir(resolve('./runtime/composables'))
 
     addTemplates(options, nuxt)
+
+    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) => {
+        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 aad29603..42bf4fe4 100644
--- a/src/runtime/components/Accordion.vue
+++ b/src/runtime/components/Accordion.vue
@@ -1,10 +1,10 @@
-<!-- eslint-disable vue/block-tag-newline -->
 <script lang="ts">
 import { tv } from 'tailwind-variants'
 import type { AccordionRootProps, AccordionRootEmits } from 'radix-vue'
 import type { AppConfig } from '@nuxt/schema'
 import _appConfig from '#build/app.config'
 import theme from '#build/ui/accordion'
+import { extendDevtoolsMeta } from '../composables/extendDevtoolsMeta'
 import type { DynamicSlots } from '../types/utils'
 
 const appConfig = _appConfig as AppConfig & { ui: { accordion: Partial<typeof theme> } }
@@ -55,6 +55,36 @@ export type AccordionSlots<T extends { slot?: string }> = {
   body: SlotProps<T>
 } & DynamicSlots<T, SlotProps<T>>
 
+extendDevtoolsMeta({
+  defaultProps: {
+    items: [{
+      label: 'Getting Started',
+      icon: 'i-heroicons-information-circle',
+      content: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed neque elit, tristique placerat feugiat ac, facilisis vitae arcu. Proin eget egestas augue. Praesent ut sem nec arcu pellentesque aliquet. Duis dapibus diam vel metus tempus vulputate.'
+    }, {
+      label: 'Installation',
+      icon: 'i-heroicons-arrow-down-tray',
+      disabled: true,
+      content: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed neque elit, tristique placerat feugiat ac, facilisis vitae arcu. Proin eget egestas augue. Praesent ut sem nec arcu pellentesque aliquet. Duis dapibus diam vel metus tempus vulputate.'
+    }, {
+      label: 'Theming',
+      icon: 'i-heroicons-eye-dropper',
+      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-heroicons-rectangle-group',
+      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-heroicons-square-3-stack-3d',
+      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-heroicons-wrench-screwdriver',
+      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 b8a6bbc4..dcc8e8d3 100644
--- a/src/runtime/components/Alert.vue
+++ b/src/runtime/components/Alert.vue
@@ -3,6 +3,7 @@ import { tv, 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 type { AvatarProps, ButtonProps } from '../types'
 
 const appConfig = _appConfig as AppConfig & { ui: { alert: Partial<typeof theme> } }
@@ -56,6 +57,8 @@ 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 d01ccb0a..e82876c6 100644
--- a/src/runtime/components/App.vue
+++ b/src/runtime/components/App.vue
@@ -1,5 +1,6 @@
 <script lang="ts">
 import type { ConfigProviderProps, TooltipProviderProps } from 'radix-vue'
+import { extendDevtoolsMeta } from '../composables/extendDevtoolsMeta'
 import type { ToasterProps } from '../types'
 
 export interface AppProps extends Omit<ConfigProviderProps, 'useId'> {
@@ -10,6 +11,12 @@ export interface AppProps extends Omit<ConfigProviderProps, 'useId'> {
 export interface AppSlots {
   default(props?: {}): any
 }
+
+export default {
+  name: 'App'
+}
+
+extendDevtoolsMeta({ ignore: true })
 </script>
 
 <script setup lang="ts">
@@ -34,6 +41,7 @@ const toasterProps = toRef(() => props.toaster)
       <UToaster v-if="toaster !== null" v-bind="toasterProps">
         <slot />
       </UToaster>
+      <slot v-else />
     </TooltipProvider>
 
     <UModalProvider />
diff --git a/src/runtime/components/Avatar.vue b/src/runtime/components/Avatar.vue
index 041660a1..de514b27 100644
--- a/src/runtime/components/Avatar.vue
+++ b/src/runtime/components/Avatar.vue
@@ -2,6 +2,7 @@
 import { tv, type VariantProps } from 'tailwind-variants'
 import type { AvatarFallbackProps } from 'radix-vue'
 import type { AppConfig } from '@nuxt/schema'
+import { extendDevtoolsMeta } from '../composables/extendDevtoolsMeta'
 import _appConfig from '#build/app.config'
 import theme from '#build/ui/avatar'
 
@@ -25,6 +26,8 @@ export interface AvatarProps extends Pick<AvatarFallbackProps, 'delayMs'> {
   class?: any
   ui?: Partial<typeof avatar.slots>
 }
+
+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 992fa694..56df6a53 100644
--- a/src/runtime/components/AvatarGroup.vue
+++ b/src/runtime/components/AvatarGroup.vue
@@ -3,6 +3,7 @@ import { tv, 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'
 
 const appConfig = _appConfig as AppConfig & { ui: { avatarGroup: Partial<typeof theme> } }
 
@@ -28,6 +29,8 @@ 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 35715d84..fa79fa89 100644
--- a/src/runtime/components/Badge.vue
+++ b/src/runtime/components/Badge.vue
@@ -3,6 +3,7 @@ import { tv, 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 type { AvatarProps } from '../types'
 
@@ -51,6 +52,8 @@ const ui = computed(() => badge({
   variant: props.variant,
   size: props.size
 }))
+
+extendDevtoolsMeta({ defaultProps: { label: 'Badge' } })
 </script>
 
 <template>
diff --git a/src/runtime/components/Breadcrumb.vue b/src/runtime/components/Breadcrumb.vue
index cf30af62..075882cb 100644
--- a/src/runtime/components/Breadcrumb.vue
+++ b/src/runtime/components/Breadcrumb.vue
@@ -1,9 +1,9 @@
-<!-- eslint-disable vue/block-tag-newline -->
 <script lang="ts">
 import { tv } from 'tailwind-variants'
 import type { AppConfig } from '@nuxt/schema'
 import _appConfig from '#build/app.config'
 import theme from '#build/ui/breadcrumb'
+import { extendDevtoolsMeta } from '../composables/extendDevtoolsMeta'
 import type { AvatarProps, LinkProps } from '../types'
 import type { DynamicSlots, PartialString } from '../types/utils'
 
@@ -49,6 +49,30 @@ export type BreadcrumbSlots<T extends { slot?: string }> = {
   'separator'(props?: {}): any
 } & DynamicSlots<T, SlotProps<T>>
 
+extendDevtoolsMeta({
+  defaultProps: {
+    items: [
+      { label: 'Home', to: '/' },
+      {
+        slot: 'dropdown',
+        icon: 'i-heroicons-ellipsis-horizontal',
+        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 c96ef394..7201f17c 100644
--- a/src/runtime/components/Button.vue
+++ b/src/runtime/components/Button.vue
@@ -5,9 +5,9 @@ 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 type { AvatarProps } from '../types'
 import type { PartialString } from '../types/utils'
-import { formLoadingInjectionKey } from '../composables/useFormField'
 
 const appConfig = _appConfig as AppConfig & { ui: { button: Partial<typeof theme> } }
 
@@ -31,6 +31,9 @@ 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
@@ -43,6 +46,7 @@ import { type Ref, computed, ref, inject } from 'vue'
 import { useForwardProps } from 'radix-vue'
 import { useComponentIcons } from '../composables/useComponentIcons'
 import { useButtonGroup } from '../composables/useButtonGroup'
+import { formLoadingInjectionKey } from '../composables/useFormField'
 import { omit } from '../utils'
 import { pickLinkProps } from '../utils/link'
 import UIcon from './Icon.vue'
diff --git a/src/runtime/components/ButtonGroup.vue b/src/runtime/components/ButtonGroup.vue
index c4a02381..df0385a1 100644
--- a/src/runtime/components/ButtonGroup.vue
+++ b/src/runtime/components/ButtonGroup.vue
@@ -3,6 +3,7 @@ import { tv, 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'
 
 const appConfig = _appConfig as AppConfig & { ui: { buttonGroup: Partial<typeof theme> } }
 
@@ -28,6 +29,8 @@ 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 c0b44d86..220f4bd0 100644
--- a/src/runtime/components/Card.vue
+++ b/src/runtime/components/Card.vue
@@ -3,6 +3,7 @@ import { tv } 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'
 
 const appConfig = _appConfig as AppConfig & { ui: { card: Partial<typeof theme> } }
 
@@ -23,6 +24,8 @@ 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 c9d0542f..7514e358 100644
--- a/src/runtime/components/Carousel.vue
+++ b/src/runtime/components/Carousel.vue
@@ -1,4 +1,3 @@
-<!-- eslint-disable vue/block-tag-newline -->
 <script lang="ts">
 import { tv, type VariantProps } from 'tailwind-variants'
 import type { AppConfig } from '@nuxt/schema'
@@ -11,6 +10,7 @@ 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 type { ButtonProps } from '../types'
 import type { AcceptableValue, PartialString } from '../types/utils'
 
@@ -91,6 +91,7 @@ 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 ad58b4be..749c4181 100644
--- a/src/runtime/components/Checkbox.vue
+++ b/src/runtime/components/Checkbox.vue
@@ -4,6 +4,7 @@ import type { CheckboxRootProps } from 'radix-vue'
 import type { AppConfig } from '@nuxt/schema'
 import _appConfig from '#build/app.config'
 import theme from '#build/ui/checkbox'
+import { extendDevtoolsMeta } from '../composables/extendDevtoolsMeta'
 
 const appConfig = _appConfig as AppConfig & { ui: { checkbox: Partial<typeof theme> } }
 
@@ -42,6 +43,8 @@ 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 3b6a9fd5..6dd54f50 100644
--- a/src/runtime/components/Chip.vue
+++ b/src/runtime/components/Chip.vue
@@ -3,6 +3,7 @@ import { tv, 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'
 
 const appConfig = _appConfig as AppConfig & { ui: { chip: Partial<typeof theme> } }
 
@@ -37,6 +38,8 @@ 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 94daf056..1e080cf7 100644
--- a/src/runtime/components/Collapsible.vue
+++ b/src/runtime/components/Collapsible.vue
@@ -4,6 +4,7 @@ import type { CollapsibleRootProps, CollapsibleRootEmits } from 'radix-vue'
 import type { AppConfig } from '@nuxt/schema'
 import _appConfig from '#build/app.config'
 import theme from '#build/ui/collapsible'
+import { extendDevtoolsMeta } from '../composables/extendDevtoolsMeta'
 
 const appConfig = _appConfig as AppConfig & { ui: { collapsible: Partial<typeof theme> } }
 
@@ -25,6 +26,8 @@ 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 4e472122..4ac54e87 100644
--- a/src/runtime/components/CommandPalette.vue
+++ b/src/runtime/components/CommandPalette.vue
@@ -1,4 +1,3 @@
-<!-- eslint-disable vue/block-tag-newline -->
 <script lang="ts">
 import { tv } from 'tailwind-variants'
 import type { ComboboxRootProps, ComboboxRootEmits } from 'radix-vue'
@@ -8,6 +7,7 @@ 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 type { AvatarProps, ButtonProps, ChipProps, KbdProps, InputProps } from '../types'
 import type { DynamicSlots, PartialString } from '../types/utils'
 
@@ -114,6 +114,7 @@ export type CommandPaletteSlots<G extends { slot?: string }, T extends { slot?:
   '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 cf64a720..aec39a97 100644
--- a/src/runtime/components/Container.vue
+++ b/src/runtime/components/Container.vue
@@ -3,6 +3,7 @@ import { tv } from 'tailwind-variants'
 import type { AppConfig } from '@nuxt/schema'
 import _appConfig from '#build/app.config'
 import theme from '#build/ui/container'
+import { extendDevtoolsMeta } from '../composables/extendDevtoolsMeta'
 
 const appConfig = _appConfig as AppConfig & { ui: { container: Partial<typeof theme> } }
 
@@ -20,6 +21,8 @@ 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 035beddf..4f899639 100644
--- a/src/runtime/components/ContextMenu.vue
+++ b/src/runtime/components/ContextMenu.vue
@@ -1,10 +1,10 @@
-<!-- eslint-disable vue/block-tag-newline -->
 <script lang="ts">
 import { tv, type VariantProps } from 'tailwind-variants'
 import type { ContextMenuRootProps, ContextMenuRootEmits, ContextMenuContentProps } from 'radix-vue'
 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 type { AvatarProps, KbdProps, LinkProps } from '../types'
 import type { DynamicSlots, PartialString } from '../types/utils'
 
@@ -79,6 +79,66 @@ export type ContextMenuSlots<T extends { slot?: string }> = {
   '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-heroicons-computer-desktop'
+        }, {
+          label: 'Light',
+          icon: 'i-heroicons-sun'
+        }, {
+          label: 'Dark',
+          icon: 'i-heroicons-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 d787eb3c..f7113722 100644
--- a/src/runtime/components/Drawer.vue
+++ b/src/runtime/components/Drawer.vue
@@ -5,6 +5,7 @@ import type { DialogContentProps } from 'radix-vue'
 import type { AppConfig } from '@nuxt/schema'
 import _appConfig from '#build/app.config'
 import theme from '#build/ui/drawer'
+import { extendDevtoolsMeta } from '../composables/extendDevtoolsMeta'
 
 const appConfig = _appConfig as AppConfig & { ui: { drawer: Partial<typeof theme> } }
 
@@ -51,6 +52,8 @@ 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 cd8e5b0a..3afe460c 100644
--- a/src/runtime/components/DropdownMenu.vue
+++ b/src/runtime/components/DropdownMenu.vue
@@ -1,10 +1,10 @@
-<!-- eslint-disable vue/block-tag-newline -->
 <script lang="ts">
 import { tv, type VariantProps } from 'tailwind-variants'
 import type { DropdownMenuRootProps, DropdownMenuRootEmits, DropdownMenuContentProps, DropdownMenuArrowProps } from 'radix-vue'
 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 type { AvatarProps, KbdProps, LinkProps } from '../types'
 import type { DynamicSlots, PartialString } from '../types/utils'
 
@@ -87,6 +87,54 @@ export type DropdownMenuSlots<T extends { slot?: string }> = {
   '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-heroicons-user',
+        slot: 'custom'
+      }, {
+        label: 'Billing',
+        icon: 'i-heroicons-credit-card',
+        kbds: ['meta', 'b']
+      }, {
+        label: 'Settings',
+        icon: 'i-heroicons-cog',
+        kbds: ['?']
+      }], [{
+        label: 'Invite users',
+        icon: 'i-heroicons-user-plus',
+        children: [[{
+          label: 'Invite by email',
+          icon: 'i-heroicons-paper-airplane'
+        }, {
+          label: 'Invite by link',
+          icon: 'i-heroicons-link',
+          kbds: ['meta', 'i']
+        }]]
+      }],
+      [{
+        label: 'GitHub',
+        icon: 'i-simple-icons-github',
+        to: 'https://github.com/nuxt/ui',
+        target: '_blank'
+      }, {
+        label: 'Support',
+        icon: 'i-heroicons-lifebuoy',
+        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 4f74671e..c1890f0f 100644
--- a/src/runtime/components/Form.vue
+++ b/src/runtime/components/Form.vue
@@ -3,6 +3,7 @@ import { tv } from 'tailwind-variants'
 import type { AppConfig } from '@nuxt/schema'
 import _appConfig from '#build/app.config'
 import theme from '#build/ui/form'
+import { extendDevtoolsMeta } from '../composables/extendDevtoolsMeta'
 import type { FormSchema, FormError, FormInputEvents, FormErrorEvent, FormSubmitEvent, FormEvent, Form, FormErrorWithId } from '../types/form'
 
 const appConfig = _appConfig as AppConfig & { ui: { form: Partial<typeof theme> } }
@@ -29,6 +30,8 @@ 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 1d682f1c..7c089b6d 100644
--- a/src/runtime/components/FormField.vue
+++ b/src/runtime/components/FormField.vue
@@ -3,6 +3,7 @@ import { tv, type VariantProps } from 'tailwind-variants'
 import type { AppConfig } from '@nuxt/schema'
 import _appConfig from '#build/app.config'
 import theme from '#build/ui/form-field'
+import { extendDevtoolsMeta } from '../composables/extendDevtoolsMeta'
 
 const appConfig = _appConfig as AppConfig & { ui: { formField: Partial<typeof theme> } }
 
@@ -33,6 +34,8 @@ 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 35b91b33..95fe9157 100644
--- a/src/runtime/components/InputMenu.vue
+++ b/src/runtime/components/InputMenu.vue
@@ -6,6 +6,7 @@ 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 type { AvatarProps, ChipProps, InputProps } from '../types'
 import type { AcceptableValue, ArrayOrWrapped, PartialString, MaybeArrayOfArray, MaybeArrayOfArrayItem, SelectModelValue, SelectModelValueEmits, SelectItemKey } from '../types/utils'
 
@@ -122,6 +123,8 @@ export interface InputMenuSlots<T> {
   'tags-item-text': SlotProps<T>
   'tags-item-delete': SlotProps<T>
 }
+
+extendDevtoolsMeta({ defaultProps: { items: ['Option 1', 'Option 2', 'Option 3'] } })
 </script>
 
 <script setup lang="ts" generic="T extends MaybeArrayOfArrayItem<I>, I extends MaybeArrayOfArray<InputMenuItem | AcceptableValue> = MaybeArrayOfArray<InputMenuItem | AcceptableValue>, 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 c46fbf06..7dc56bd1 100644
--- a/src/runtime/components/Kbd.vue
+++ b/src/runtime/components/Kbd.vue
@@ -4,6 +4,7 @@ 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'
 
 const appConfig = _appConfig as AppConfig & { ui: { kbd: Partial<typeof theme> } }
 
@@ -26,6 +27,7 @@ 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 ee20440c..27b8f2bf 100644
--- a/src/runtime/components/Link.vue
+++ b/src/runtime/components/Link.vue
@@ -5,6 +5,7 @@ import type { AppConfig } from '@nuxt/schema'
 import _appConfig from '#build/app.config'
 import type { RouterLinkProps, RouteLocationRaw } from 'vue-router'
 import theme from '#build/ui/link'
+import { extendDevtoolsMeta } from '../composables/extendDevtoolsMeta'
 
 interface NuxtLinkProps extends Omit<RouterLinkProps, 'to'> {
   /**
@@ -87,6 +88,8 @@ 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 f916d242..18007e07 100644
--- a/src/runtime/components/Modal.vue
+++ b/src/runtime/components/Modal.vue
@@ -4,6 +4,7 @@ import type { DialogRootProps, DialogRootEmits, DialogContentProps } from 'radix
 import type { AppConfig } from '@nuxt/schema'
 import _appConfig from '#build/app.config'
 import theme from '#build/ui/modal'
+import { extendDevtoolsMeta } from '../composables/extendDevtoolsMeta'
 import type { ButtonProps } from '../types'
 
 const appConfig = _appConfig as AppConfig & { ui: { modal: Partial<typeof theme> } }
@@ -67,6 +68,8 @@ 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 cb60d7db..059c3615 100644
--- a/src/runtime/components/NavigationMenu.vue
+++ b/src/runtime/components/NavigationMenu.vue
@@ -1,10 +1,10 @@
-<!-- eslint-disable vue/block-tag-newline -->
 <script lang="ts">
 import { tv, type VariantProps } from 'tailwind-variants'
 import type { NavigationMenuRootProps, NavigationMenuRootEmits, NavigationMenuContentProps } from 'radix-vue'
 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 type { AvatarProps, BadgeProps, LinkProps } from '../types'
 import type { DynamicSlots, MaybeArrayOfArray, MaybeArrayOfArrayItem, PartialString } from '../types/utils'
 
@@ -81,6 +81,44 @@ export type NavigationMenuSlots<T extends { slot?: string }> = {
   'item-content': SlotProps<T>
 } & DynamicSlots<T, SlotProps<T>>
 
+extendDevtoolsMeta({
+  ignoreProps: ['items'],
+  defaultProps: {
+    items: [
+      [{
+        label: 'Documentation',
+        icon: 'i-heroicons-book-open',
+        badge: 10,
+        children: [{
+          label: 'Introduction',
+          description: 'Fully styled and customizable components for Nuxt.',
+          icon: 'i-heroicons-home'
+        }, {
+          label: 'Installation',
+          description: 'Learn how to install and configure Nuxt UI in your application.',
+          icon: 'i-heroicons-cloud-arrow-down'
+        }, {
+          label: 'Theming',
+          description: 'Learn how to customize the look and feel of the components.',
+          icon: 'i-heroicons-swatch'
+        }, {
+          label: 'Shortcuts',
+          description: 'Learn how to display and define keyboard shortcuts in your app.',
+          icon: 'i-heroicons-computer-desktop'
+        }]
+      }, {
+        label: 'GitHub',
+        icon: 'i-simple-icons-github',
+        to: 'https://github.com/nuxt/ui',
+        target: '_blank'
+      }, {
+        label: 'Help',
+        icon: 'i-heroicons-question-mark-circle',
+        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 2b36a061..0d38770a 100644
--- a/src/runtime/components/Pagination.vue
+++ b/src/runtime/components/Pagination.vue
@@ -5,6 +5,7 @@ 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 type { ButtonProps } from '../types'
 
 const appConfig = _appConfig as AppConfig & { ui: { pagination: Partial<typeof theme> } }
@@ -97,6 +98,8 @@ 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 7968363e..31339106 100644
--- a/src/runtime/components/Popover.vue
+++ b/src/runtime/components/Popover.vue
@@ -4,6 +4,7 @@ import type { PopoverRootProps, HoverCardRootProps, PopoverRootEmits, PopoverCon
 import type { AppConfig } from '@nuxt/schema'
 import _appConfig from '#build/app.config'
 import theme from '#build/ui/popover'
+import { extendDevtoolsMeta } from '../composables/extendDevtoolsMeta'
 
 const appConfig = _appConfig as AppConfig & { ui: { popover: Partial<typeof theme> } }
 
@@ -40,6 +41,8 @@ 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 c2759555..337366b0 100644
--- a/src/runtime/components/RadioGroup.vue
+++ b/src/runtime/components/RadioGroup.vue
@@ -4,6 +4,7 @@ import type { RadioGroupRootProps, RadioGroupRootEmits } from 'radix-vue'
 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 type { AcceptableValue } from '../types/utils'
 
 const appConfig = _appConfig as AppConfig & { ui: { radioGroup: Partial<typeof theme> } }
@@ -64,6 +65,8 @@ 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 1b45bbcd..0289733d 100644
--- a/src/runtime/components/Select.vue
+++ b/src/runtime/components/Select.vue
@@ -5,6 +5,7 @@ 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 type { AvatarProps, ChipProps, InputProps } from '../types'
 import type { AcceptableValue, PartialString, MaybeArrayOfArray, MaybeArrayOfArrayItem, SelectModelValue, SelectModelValueEmits, SelectItemKey } from '../types/utils'
 
@@ -95,6 +96,8 @@ export interface SelectSlots<T> {
   '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> = MaybeArrayOfArray<SelectItem | AcceptableValue>, V extends SelectItemKey<T> | undefined = undefined">
diff --git a/src/runtime/components/SelectMenu.vue b/src/runtime/components/SelectMenu.vue
index 4037528c..d7014044 100644
--- a/src/runtime/components/SelectMenu.vue
+++ b/src/runtime/components/SelectMenu.vue
@@ -5,6 +5,7 @@ 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 type { AvatarProps, ChipProps, InputProps } from '../types'
 import type { AcceptableValue, ArrayOrWrapped, PartialString, MaybeArrayOfArray, MaybeArrayOfArrayItem, SelectModelValue, SelectModelValueEmits, SelectItemKey } from '../types/utils'
 
@@ -112,6 +113,8 @@ export interface SelectMenuSlots<T> {
   '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<SelectMenuItem | AcceptableValue> = MaybeArrayOfArray<SelectMenuItem | AcceptableValue>, 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 565d987f..8b611733 100644
--- a/src/runtime/components/Skeleton.vue
+++ b/src/runtime/components/Skeleton.vue
@@ -3,6 +3,7 @@ import { tv } from 'tailwind-variants'
 import type { AppConfig } from '@nuxt/schema'
 import _appConfig from '#build/app.config'
 import theme from '#build/ui/skeleton'
+import { extendDevtoolsMeta } from '../composables/extendDevtoolsMeta'
 
 const appConfig = _appConfig as AppConfig & { ui: { skeleton: Partial<typeof theme> } }
 
@@ -16,6 +17,8 @@ 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 14013940..4b7398dd 100644
--- a/src/runtime/components/Slideover.vue
+++ b/src/runtime/components/Slideover.vue
@@ -4,6 +4,7 @@ import type { DialogRootProps, DialogRootEmits, DialogContentProps } from 'radix
 import type { AppConfig } from '@nuxt/schema'
 import _appConfig from '#build/app.config'
 import theme from '#build/ui/slideover'
+import { extendDevtoolsMeta } from '../composables/extendDevtoolsMeta'
 import type { ButtonProps } from '../types'
 
 const appConfig = _appConfig as AppConfig & { ui: { slideover: Partial<typeof theme> } }
@@ -65,6 +66,8 @@ export interface SlideoverSlots {
   body(props?: {}): any
   footer(props?: {}): any
 }
+
+extendDevtoolsMeta({ example: 'SlideoverExample' })
 </script>
 
 <script setup lang="ts">
diff --git a/src/runtime/components/Switch.vue b/src/runtime/components/Switch.vue
index 8a25cc15..dccd1e6f 100644
--- a/src/runtime/components/Switch.vue
+++ b/src/runtime/components/Switch.vue
@@ -4,6 +4,7 @@ import type { SwitchRootProps } from 'radix-vue'
 import type { AppConfig } from '@nuxt/schema'
 import _appConfig from '#build/app.config'
 import theme from '#build/ui/switch'
+import { extendDevtoolsMeta } from '../composables/extendDevtoolsMeta'
 import type { PartialString } from '../types/utils'
 
 const appConfig = _appConfig as AppConfig & { ui: { switch: Partial<typeof theme> } }
@@ -48,6 +49,8 @@ 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 7f16a80d..465fe4cd 100644
--- a/src/runtime/components/Tabs.vue
+++ b/src/runtime/components/Tabs.vue
@@ -1,10 +1,10 @@
-<!-- eslint-disable vue/block-tag-newline -->
 <script lang="ts">
 import { tv, type VariantProps } from 'tailwind-variants'
 import type { TabsRootProps, TabsRootEmits, TabsContentProps } from 'radix-vue'
 import type { AppConfig } from '@nuxt/schema'
 import _appConfig from '#build/app.config'
 import theme from '#build/ui/tabs'
+import { extendDevtoolsMeta } from '../composables/extendDevtoolsMeta'
 import type { AvatarProps } from '../types'
 import type { DynamicSlots, PartialString } from '../types/utils'
 
@@ -65,6 +65,23 @@ export type TabsSlots<T extends { slot?: string }> = {
   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-heroicons-user',
+      content: 'And, this is the content for Tab2'
+    }, {
+      label: 'Tab3',
+      icon: 'i-heroicons-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 41fc1d36..c9632c46 100644
--- a/src/runtime/components/Toast.vue
+++ b/src/runtime/components/Toast.vue
@@ -4,6 +4,7 @@ import type { ToastRootProps, ToastRootEmits } from 'radix-vue'
 import type { AppConfig } from '@nuxt/schema'
 import _appConfig from '#build/app.config'
 import theme from '#build/ui/toast'
+import { extendDevtoolsMeta } from '../composables/extendDevtoolsMeta'
 import type { AvatarProps, ButtonProps } from '../types'
 
 const appConfig = _appConfig as AppConfig & { ui: { toast: Partial<typeof theme> } }
@@ -53,6 +54,8 @@ 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 076a5bfc..349c86bf 100644
--- a/src/runtime/components/Toaster.vue
+++ b/src/runtime/components/Toaster.vue
@@ -4,6 +4,7 @@ import type { ToastProviderProps } from 'radix-vue'
 import type { AppConfig } from '@nuxt/schema'
 import _appConfig from '#build/app.config'
 import theme from '#build/ui/toaster'
+import { extendDevtoolsMeta } from '../composables/extendDevtoolsMeta'
 
 const appConfig = _appConfig as AppConfig & { ui: { toaster: Partial<typeof theme> } }
 
@@ -25,6 +26,12 @@ export interface ToasterProps extends Omit<ToastProviderProps, 'swipeDirection'>
 export interface ToasterSlots {
   default(props?: {}): any
 }
+
+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 916d7e3a..5c08e6b4 100644
--- a/src/runtime/components/Tooltip.vue
+++ b/src/runtime/components/Tooltip.vue
@@ -4,6 +4,7 @@ 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 type { KbdProps } from '../types'
 
 const appConfig = _appConfig as AppConfig & { ui: { tooltip: Partial<typeof theme> } }
@@ -40,6 +41,8 @@ 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/composables/extendDevtoolsMeta.ts b/src/runtime/composables/extendDevtoolsMeta.ts
new file mode 100644
index 00000000..17b02513
--- /dev/null
+++ b/src/runtime/composables/extendDevtoolsMeta.ts
@@ -0,0 +1,8 @@
+export type DevtoolsMeta<T> = {
+  defaultProps?: T
+  example?: string
+  ignore?: boolean
+  ignoreProps?: string[]
+}
+
+export function extendDevtoolsMeta<T>(_meta: DevtoolsMeta<T>) { }
diff --git a/src/templates.ts b/src/templates.ts
index 4774f878..c51cec60 100644
--- a/src/templates.ts
+++ b/src/templates.ts
@@ -5,6 +5,13 @@ import type { Nuxt, NuxtTemplate, NuxtTypeTemplate } from '@nuxt/schema'
 import type { ModuleOptions } from './module'
 import * as theme from './theme'
 
+export function buildTemplates(options: ModuleOptions) {
+  return Object.entries(theme).reduce((acc, [key, component]) => {
+    acc[key] = typeof component === 'function' ? component(options as Required<ModuleOptions>) : component
+    return acc
+  }, {} as Record<string, any>)
+}
+
 export function getTemplates(options: ModuleOptions, uiConfig: Record<string, any>) {
   const templates: NuxtTemplate[] = []
 
diff --git a/src/unplugin.ts b/src/unplugin.ts
index 88a62dee..ad604351 100644
--- a/src/unplugin.ts
+++ b/src/unplugin.ts
@@ -44,7 +44,7 @@ export interface NuxtUIOptions extends Omit<ModuleOptions, 'fonts' | 'colorMode'
 export const runtimeDir = fileURLToPath(new URL('./runtime', import.meta.url))
 
 export const NuxtUIPlugin = createUnplugin<NuxtUIOptions | undefined>((_options = {}, meta) => {
-  const options = defu(_options, { fonts: false }, defaultOptions)
+  const options = defu(_options, { fonts: false, devtools: { enabled: false } }, defaultOptions)
 
   options.theme = options.theme || {}
   options.theme.colors = resolveColors(options.theme.colors)
diff --git a/tsconfig.json b/tsconfig.json
index f537e877..804c292c 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", "node_modules"]
+  "exclude": ["cli", "docs", "dist", "playground", "devtools", "node_modules"]
 }