chore: up

2026-01-15 20:48:12 +01:00 · 2025-03-28 16:22:31 +01:00 · 2025-03-28 08:58:21 +01:00 · 2025-03-26 13:45:17 +01:00 · 2025-03-26 11:40:23 +01:00 · 2025-03-24 15:08:07 +01:00
77 changed files with 1820 additions and 131 deletions
--- a/package.json
+++ b/package.json
@@ -64,7 +64,7 @@
    "prepack": "pnpm build",
    "dev": "DEV=true nuxi dev playground",
    "dev:build": "nuxi build playground",
-    "dev:vue": "DEV=true vite playground-vue",
+    "dev:vue": "DEV=true pnpm --filter playground-vue dev",
    "dev:vue:build": "vite build playground-vue",
    "dev:prepare": "nuxt-module-build build --stub && nuxt-module-build prepare && nuxi prepare playground && nuxi prepare docs && vite build playground-vue",
    "docs": "DEV=true nuxi dev docs",
--- a/playground-vue/package.json
+++ b/playground-vue/package.json
@@ -16,6 +16,7 @@
    "zod": "^3.24.2"
  },
  "devDependencies": {
+    "@compodium/vue": "https://pkg.pr.new/romhml/compodium/@compodium/vue@18f083d",
    "@vitejs/plugin-vue": "^5.2.3",
    "typescript": "^5.6.3",
    "vite": "^6.2.3",
--- a/playground-vue/src/main.ts
+++ b/playground-vue/src/main.ts
@@ -10,7 +10,7 @@ const pages = import.meta.glob('../../playground/app/pages/**/*.vue')
 const components = import.meta.glob('../../playground/app/components/**/*.vue')

 const routes = Object.keys(pages).map((path) => {
-  const name = path.match(/\.\.\/\.\.\/playground\/app\/pages(.*)\.vue$/)![1].toLowerCase()
+  const name = path.match(/\.\.\/\.\.\/playground\/app\/pages(.*)\.vue$/)!.[1].toLowerCase()
  return {
    path: name === '/index' ? '/' : name,
    component: pages[path]
--- a/playground-vue/vite.config.ts
+++ b/playground-vue/vite.config.ts
@@ -1,6 +1,7 @@
 import { defineConfig } from 'vite'
 import vue from '@vitejs/plugin-vue'

+import { compodium } from '@compodium/vue'
 import ui from '../src/vite'

 // https://vitejs.dev/config/
@@ -25,7 +26,21 @@ export default defineConfig({
      components: {
        dirs: ['../playground/app/components']
      }
+    }),
+    compodium({
+      dir: '../playground/compodium',
+      includeLibraryCollections: false,
+
+      componentDirs: [
+        { path: '../src/runtime/components', prefix: 'U', pathPrefix: false }
+      ],
+      extras: {
+        colors: {
+          neutral: 'slate'
+        }
+      }
    })
+
  ],
  optimizeDeps: {
    // prevents reloading page when navigating between components
--- a/playground/app/app.vue
+++ b/playground/app/app.vue
@@ -1,123 +1,5 @@
-<script setup lang="ts">
-import { splitByCase, upperFirst } from 'scule'
-import { useColorMode } from '#imports'
-
-const router = useRouter()
-const appConfig = useAppConfig()
-const colorMode = useColorMode()
-
-const isDark = computed({
-  get() {
-    return colorMode.value === 'dark'
-  },
-  set() {
-    colorMode.preference = colorMode.value === 'dark' ? 'light' : 'dark'
-  }
-})
-
-const components = [
-  'accordion',
-  'alert',
-  'avatar',
-  'badge',
-  'breadcrumb',
-  'button',
-  'button-group',
-  'card',
-  'calendar',
-  'carousel',
-  'checkbox',
-  'chip',
-  'collapsible',
-  'color-picker',
-  'context-menu',
-  'command-palette',
-  'drawer',
-  'dropdown-menu',
-  'form',
-  'form-field',
-  'input',
-  'input-menu',
-  'input-number',
-  'kbd',
-  'link',
-  'modal',
-  'navigation-menu',
-  'pagination',
-  'pin-input',
-  'popover',
-  'progress',
-  'radio-group',
-  'select',
-  'select-menu',
-  'separator',
-  'shortcuts',
-  'skeleton',
-  'slideover',
-  'slider',
-  'stepper',
-  'switch',
-  'tabs',
-  'table',
-  'textarea',
-  'toast',
-  'tooltip',
-  'tree'
-]
-
-const items = components.map(component => ({ label: upperName(component), to: `/components/${component}` }))
-
-function upperName(name: string) {
-  return splitByCase(name).map(p => upperFirst(p)).join('')
-}
-
-const isCommandPaletteOpen = ref(false)
-
-function onSelect(item: any) {
-  router.push(item.to)
-}
-
-defineShortcuts({
-  meta_k: () => isCommandPaletteOpen.value = true
-})
-</script>
-
 <template>
-  <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-(--ui-bg)" data-vaul-drawer-wrapper>
-        <UNavigationMenu :items="items" orientation="vertical" class="hidden lg:flex border-e border-(--ui-border) overflow-y-auto w-48 p-4" />
-        <UNavigationMenu :items="items" orientation="horizontal" class="lg:hidden border-b border-(--ui-border) [&>div]:min-w-min overflow-x-auto" />
-
-        <div class="fixed top-15 lg:top-3 right-4 flex items-center gap-2">
-          <ClientOnly v-if="!colorMode?.forced">
-            <UButton
-              :icon="isDark ? 'i-lucide-moon' : 'i-lucide-sun'"
-              color="neutral"
-              variant="ghost"
-              :aria-label="`Switch to ${isDark ? 'light' : 'dark'} mode`"
-              @click="isDark = !isDark"
-            />
-
-            <template #fallback>
-              <div class="size-8" />
-            </template>
-          </ClientOnly>
-        </div>
-
-        <div class="flex-1 flex flex-col items-center justify-around overflow-y-auto w-full py-14 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>
-    </UApp>
-  </template>
-  <template v-else>
+  <UApp>
    <NuxtPage />
-  </template>
+  </UApp>
 </template>
--- a/playground/app/pages/components.vue
+++ b/playground/app/pages/components.vue
@@ -0,0 +1,118 @@
+<script setup lang="ts">
+import { splitByCase, upperFirst } from 'scule'
+import { useColorMode } from '#imports'
+
+const router = useRouter()
+const appConfig = useAppConfig()
+const colorMode = useColorMode()
+
+const isDark = computed({
+  get() {
+    return colorMode.value === 'dark'
+  },
+  set() {
+    colorMode.preference = colorMode.value === 'dark' ? 'light' : 'dark'
+  }
+})
+
+const components = [
+  'accordion',
+  'alert',
+  'avatar',
+  'badge',
+  'breadcrumb',
+  'button',
+  'button-group',
+  'card',
+  'calendar',
+  'carousel',
+  'checkbox',
+  'chip',
+  'collapsible',
+  'color-picker',
+  'context-menu',
+  'command-palette',
+  'drawer',
+  'dropdown-menu',
+  'form',
+  'form-field',
+  'input',
+  'input-menu',
+  'input-number',
+  'kbd',
+  'link',
+  'modal',
+  'navigation-menu',
+  'pagination',
+  'pin-input',
+  'popover',
+  'progress',
+  'radio-group',
+  'select',
+  'select-menu',
+  'separator',
+  'shortcuts',
+  'skeleton',
+  'slideover',
+  'slider',
+  'stepper',
+  'switch',
+  'tabs',
+  'table',
+  'textarea',
+  'toast',
+  'tooltip',
+  'tree'
+]
+
+const items = components.map(component => ({ label: upperName(component), to: `/components/${component}` }))
+
+function upperName(name: string) {
+  return splitByCase(name).map(p => upperFirst(p)).join('')
+}
+
+const isCommandPaletteOpen = ref(false)
+
+function onSelect(item: any) {
+  router.push(item.to)
+}
+
+defineShortcuts({
+  meta_k: () => isCommandPaletteOpen.value = true
+})
+</script>
+
+<template>
+  <UApp :toaster="appConfig.toaster">
+    <div class="h-screen w-screen overflow-hidden flex flex-col lg:flex-row min-h-0 bg-(--ui-bg)" data-vaul-drawer-wrapper>
+      <UNavigationMenu :items="items" orientation="vertical" class="hidden lg:flex border-e border-(--ui-border) overflow-y-auto w-48 p-4" />
+      <UNavigationMenu :items="items" orientation="horizontal" class="lg:hidden border-b border-(--ui-border) [&>div]:min-w-min overflow-x-auto" />
+
+      <div class="fixed top-15 lg:top-3 right-4 flex items-center gap-2">
+        <ClientOnly v-if="!colorMode?.forced">
+          <UButton
+            :icon="isDark ? 'i-lucide-moon' : 'i-lucide-sun'"
+            color="neutral"
+            variant="ghost"
+            :aria-label="`Switch to ${isDark ? 'light' : 'dark'} mode`"
+            @click="isDark = !isDark"
+          />
+
+          <template #fallback>
+            <div class="size-8" />
+          </template>
+        </ClientOnly>
+      </div>
+
+      <div class="flex-1 flex flex-col items-center justify-around overflow-y-auto w-full py-14 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>
+  </UApp>
+</template>
--- a/playground/app/pages/index.vue
+++ b/playground/app/pages/index.vue
@@ -1,11 +1,20 @@
+<script setup lang="ts">
+
+</script>
+
 <template>
-  <div class="text-center">
-    <h1 class="font-semibold mb-1">
-      Playground
+  <div class="w-screen h-screen flex flex-col justify-center items-center gap-2">
+    <h1 class="text-3xl font-bold mb-1">
+      Nuxt UI Playground
    </h1>

    <div class="flex items-center justify-center gap-1">
-      <UKbd value="meta" /> <UKbd value="K" />
+      <UButton size="lg" to="/__compodium__/devtools" external>
+        Browse components
+      </UButton>
+      <UButton variant="outline" color="neutral" size="lg">
+        Documentation
+      </UButton>
    </div>
  </div>
 </template>
--- a/playground/compodium/examples/UAccordion/UAccordionExample.vue
+++ b/playground/compodium/examples/UAccordion/UAccordionExample.vue
@@ -0,0 +1,55 @@
+<script setup lang="ts">
+defineOptions({
+  inheritAttrs: false
+})
+
+extendCompodiumMeta({
+  defaultProps: {
+    items: [{
+      label: 'Getting Started',
+      icon: 'i-lucide-info',
+      content: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed neque elit, tristique placerat feugiat ac, facilisis vitae arcu. Proin eget egestas augue. Praesent ut sem nec arcu pellentesque aliquet. Duis dapibus diam vel metus tempus vulputate.'
+    }, {
+      label: 'Installation',
+      icon: 'i-lucide-download',
+      disabled: true,
+      content: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed neque elit, tristique placerat feugiat ac, facilisis vitae arcu. Proin eget egestas augue. Praesent ut sem nec arcu pellentesque aliquet. Duis dapibus diam vel metus tempus vulputate.'
+    }, {
+      label: 'Theming',
+      icon: 'i-lucide-pipette',
+      content: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed neque elit, tristique placerat feugiat ac, facilisis vitae arcu. Proin eget egestas augue. Praesent ut sem nec arcu pellentesque aliquet. Duis dapibus diam vel metus tempus vulputate.'
+    }, {
+      label: 'Layouts',
+      icon: 'i-lucide-layout-dashboard',
+      content: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed neque elit, tristique placerat feugiat ac, facilisis vitae arcu. Proin eget egestas augue. Praesent ut sem nec arcu pellentesque aliquet. Duis dapibus diam vel metus tempus vulputate.'
+    }, {
+      label: 'Components',
+      icon: 'i-lucide-layers-3',
+      content: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed neque elit, tristique placerat feugiat ac, facilisis vitae arcu. Proin eget egestas augue. Praesent ut sem nec arcu pellentesque aliquet. Duis dapibus diam vel metus tempus vulputate.'
+    }, {
+      label: 'Utilities',
+      slot: 'custom' as const,
+      icon: 'i-lucide-wrench',
+      content: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed neque elit, tristique placerat feugiat ac, facilisis vitae arcu. Proin eget egestas augue. Praesent ut sem nec arcu pellentesque aliquet. Duis dapibus diam vel metus tempus vulputate.'
+    }]
+  }
+})
+</script>
+
+<template>
+  <UCard :ui="{ body: 'p-0 sm:p-0' }">
+    <UAccordion v-bind="$attrs" class="w-96" :ui="{ trigger: 'px-3.5', body: 'px-3.5' }">
+      <template #body="{ item }">
+        <p class="text-(--ui-text-muted)">
+          {{ item.content }}
+        </p>
+      </template>
+
+      <template #custom-body="{ item }">
+        <p class="text-(--ui-text-muted)">
+          Custom: {{ item.content }}
+        </p>
+      </template>
+    </UAccordion>
+  </UCard>
+</template>
--- a/playground/compodium/examples/UAlert/UAlertExample.vue
+++ b/playground/compodium/examples/UAlert/UAlertExample.vue
@@ -0,0 +1,12 @@
+<script setup lang="ts">
+extendCompodiumMeta({
+  defaultProps: {
+    title: 'Heads up!',
+    description: 'You can change the primary color in your app config.'
+  }
+})
+</script>
+
+<template>
+  <UAlert />
+</template>
--- a/playground/compodium/examples/UAlert/UAlertExampleAction.vue
+++ b/playground/compodium/examples/UAlert/UAlertExampleAction.vue
@@ -0,0 +1,57 @@
+<script setup lang="ts">
+extendCompodiumMeta({
+  combo: ['variant'],
+  defaultProps: {
+    icon: 'i-lucide-terminal',
+    title: 'Heads up!',
+    description: 'You can change the primary color in your app config.',
+    close: true,
+    actions: [
+
+      {
+        label: 'Action',
+        onClick() {
+          console.log('Action clicked')
+        }
+      },
+      {
+        label: 'Another action',
+        color: 'warning',
+        onClick() {
+          console.log('Another action clicked')
+        }
+      },
+      {
+        label: 'One more action',
+        color: 'error',
+        onClick() {
+          console.log('One more action clicked')
+        }
+      },
+      {
+        label: 'And one more',
+        color: 'info',
+        icon: 'i-lucide-info',
+        onClick() {
+          console.log('And one more clicked')
+        }
+      },
+      {
+        label: 'Last one',
+        color: 'neutral',
+        icon: 'i-lucide-info',
+        onClick() {
+          console.log('Last one clicked')
+        }
+      }
+    ]
+  }
+})
+
+const multipleActions = (color: string) => [
+]
+</script>
+
+<template>
+  <UAlert />
+</template>
--- a/playground/compodium/examples/UAlert/UAlertExampleAvatar.vue
+++ b/playground/compodium/examples/UAlert/UAlertExampleAvatar.vue
@@ -0,0 +1,14 @@
+<script setup lang="ts">
+extendCompodiumMeta({
+  combo: ['variant'],
+  defaultProps: {
+    avatar: { src: 'https://github.com/benjamincanac.png' },
+    title: 'Heads up!',
+    description: 'You can change the primary color in your app config.'
+  }
+})
+</script>
+
+<template>
+  <UAlert />
+</template>
--- a/playground/compodium/examples/UAlert/UAlertExampleIcon.vue
+++ b/playground/compodium/examples/UAlert/UAlertExampleIcon.vue
@@ -0,0 +1,14 @@
+<script setup lang="ts">
+extendCompodiumMeta({
+  combo: ['variant'],
+  defaultProps: {
+    icon: 'i-lucide-terminal',
+    title: 'Heads up!',
+    description: 'You can change the primary color in your app config.'
+  }
+})
+</script>
+
+<template>
+  <UAlert />
+</template>
--- a/playground/compodium/examples/UAlert/UAlertExampleVariants.vue
+++ b/playground/compodium/examples/UAlert/UAlertExampleVariants.vue
@@ -0,0 +1,13 @@
+<script setup lang="ts">
+extendCompodiumMeta({
+  combo: ['variant', 'color'],
+  defaultProps: {
+    title: 'Heads up!',
+    description: 'You can change the primary color in your app config.'
+  }
+})
+</script>
+
+<template>
+  <UAlert />
+</template>
--- a/playground/compodium/examples/UAvatar/UAvatarExample.vue
+++ b/playground/compodium/examples/UAvatar/UAvatarExample.vue
@@ -0,0 +1,11 @@
+<script setup lang="ts">
+extendCompodiumMeta({
+  defaultProps: {
+    src: 'https://github.com/benjamincanac.png'
+  }
+})
+</script>
+
+<template>
+  <UAvatar />
+</template>
--- a/playground/compodium/examples/UAvatar/UAvatarExampleIcon.vue
+++ b/playground/compodium/examples/UAvatar/UAvatarExampleIcon.vue
@@ -0,0 +1,12 @@
+<script setup lang="ts">
+extendCompodiumMeta({
+  combo: ['size'],
+  defaultProps: {
+    icon: 'i-lucide-image'
+  }
+})
+</script>
+
+<template>
+  <UAvatar />
+</template>
--- a/playground/compodium/examples/UAvatar/UAvatarExampleLetters.vue
+++ b/playground/compodium/examples/UAvatar/UAvatarExampleLetters.vue
@@ -0,0 +1,12 @@
+<script setup lang="ts">
+extendCompodiumMeta({
+  combo: ['size'],
+  defaultProps: {
+    alt: 'Benjamin Canac'
+  }
+})
+</script>
+
+<template>
+  <UAvatar />
+</template>
--- a/playground/compodium/examples/UAvatar/UAvatarExampleSizes.vue
+++ b/playground/compodium/examples/UAvatar/UAvatarExampleSizes.vue
@@ -0,0 +1,12 @@
+<script setup lang="ts">
+extendCompodiumMeta({
+  combo: ['size'],
+  defaultProps: {
+    src: 'https://github.com/benjamincanac.png'
+  }
+})
+</script>
+
+<template>
+  <UAvatar />
+</template>
--- a/playground/compodium/examples/UAvatarGroup/UAvatarGroupExample.vue
+++ b/playground/compodium/examples/UAvatarGroup/UAvatarGroupExample.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>
--- a/playground/compodium/examples/UAvatarGroup/UAvatarGroupExampleSizes.vue
+++ b/playground/compodium/examples/UAvatarGroup/UAvatarGroupExampleSizes.vue
@@ -0,0 +1,13 @@
+<script setup lang="ts">
+extendCompodiumMeta({
+  combo: ['size']
+})
+</script>
+
+<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>
--- a/playground/compodium/examples/UAvatarGroup/UAvatarGroupExampleWithChip.vue
+++ b/playground/compodium/examples/UAvatarGroup/UAvatarGroupExampleWithChip.vue
@@ -0,0 +1,15 @@
+<script setup lang="ts">
+extendCompodiumMeta({
+  combo: ['size']
+})
+</script>
+
+<template>
+  <UAvatarGroup>
+    <UChip inset text="1">
+      <UAvatar src="https://github.com/benjamincanac.png" alt="Benjamin Canac" />
+    </UChip>
+    <UAvatar src="https://github.com/romhml.png" alt="Romain Hamel" />
+    <UAvatar src="https://github.com/noook.png" alt="Neil Richter" />
+  </UAvatarGroup>
+</template>
--- a/playground/compodium/examples/UBadge/UBadgeExample.vue
+++ b/playground/compodium/examples/UBadge/UBadgeExample.vue
@@ -0,0 +1,11 @@
+<script setup lang="ts">
+extendCompodiumMeta({
+  defaultProps: {
+    label: 'Badge'
+  }
+})
+</script>
+
+<template>
+  <UBadge />
+</template>
--- a/playground/compodium/examples/UBadge/UBadgeExampleAvatar.vue
+++ b/playground/compodium/examples/UBadge/UBadgeExampleAvatar.vue
@@ -0,0 +1,13 @@
+<script setup lang="ts">
+extendCompodiumMeta({
+  combo: ['size', 'variant'],
+  defaultProps: {
+    label: 'Badge',
+    avatar: { src: 'https://github.com/benjamincanac.png' }
+  }
+})
+</script>
+
+<template>
+  <UBadge />
+</template>
--- a/playground/compodium/examples/UBadge/UBadgeExampleIcon.vue
+++ b/playground/compodium/examples/UBadge/UBadgeExampleIcon.vue
@@ -0,0 +1,13 @@
+<script setup lang="ts">
+extendCompodiumMeta({
+  combo: ['size', 'variant'],
+  defaultProps: {
+    label: 'Badge',
+    icon: 'i-lucide-rocket'
+  }
+})
+</script>
+
+<template>
+  <UBadge />
+</template>
--- a/playground/compodium/examples/UBadge/UBadgeExampleSizes.vue
+++ b/playground/compodium/examples/UBadge/UBadgeExampleSizes.vue
@@ -0,0 +1,13 @@
+<script setup lang="ts">
+extendCompodiumMeta({
+  combo: ['size', 'variant'],
+  defaultProps: {
+    label: 'Badge',
+    disabled: true
+  }
+})
+</script>
+
+<template>
+  <UBadge />
+</template>
--- a/playground/compodium/examples/UBadge/UBadgeExampleVariants.vue
+++ b/playground/compodium/examples/UBadge/UBadgeExampleVariants.vue
@@ -0,0 +1,12 @@
+<script setup lang="ts">
+extendCompodiumMeta({
+  combo: ['variant', 'color'],
+  defaultProps: {
+    label: 'Badge'
+  }
+})
+</script>
+
+<template>
+  <UBadge />
+</template>
--- a/playground/compodium/examples/UBreadcrumb/UBreadcrumbExample.vue
+++ b/playground/compodium/examples/UBreadcrumb/UBreadcrumbExample.vue
@@ -0,0 +1,30 @@
+<script setup lang="ts">
+extendCompodiumMeta({
+  defaultProps: {
+    items: [{
+      label: 'Home',
+      to: '/'
+    }, {
+      slot: 'dropdown' as const,
+      icon: 'i-lucide-ellipsis',
+      children: [{
+        label: 'Documentation'
+      }, {
+        label: 'Themes'
+      }, {
+        label: 'GitHub'
+      }]
+    }, {
+      label: 'Components',
+      disabled: true
+    }, {
+      label: 'Breadcrumb',
+      to: '/components/breadcrumb'
+    }]
+  }
+})
+</script>
+
+<template>
+  <UBreadcrumb />
+</template>
--- a/playground/compodium/examples/UButton/UButtonExample.vue
+++ b/playground/compodium/examples/UButton/UButtonExample.vue
@@ -0,0 +1,12 @@
+<script setup lang="ts">
+extendCompodiumMeta({
+  combo: ['variant', 'color'],
+  defaultProps: {
+    label: 'Click me!'
+  }
+})
+</script>
+
+<template>
+  <UButton />
+</template>
--- a/playground/compodium/examples/UButton/UButtonExampleAvatar.vue
+++ b/playground/compodium/examples/UButton/UButtonExampleAvatar.vue
@@ -0,0 +1,12 @@
+<script setup lang="ts">
+extendCompodiumMeta({
+  combo: ['size', 'variant'],
+  defaultProps: {
+    avatar: { src: 'https://github.com/benjamincanac.png' }
+  }
+})
+</script>
+
+<template>
+  <UButton />
+</template>
--- a/playground/compodium/examples/UButton/UButtonExampleIcon.vue
+++ b/playground/compodium/examples/UButton/UButtonExampleIcon.vue
@@ -0,0 +1,13 @@
+<script setup lang="ts">
+extendCompodiumMeta({
+  combo: ['size', 'variant'],
+  defaultProps: {
+    label: 'Click me!',
+    icon: 'i-lucide-rocket'
+  }
+})
+</script>
+
+<template>
+  <UButton />
+</template>
--- a/playground/compodium/examples/UButton/UButtonExampleLoading.vue
+++ b/playground/compodium/examples/UButton/UButtonExampleLoading.vue
@@ -0,0 +1,13 @@
+<script setup lang="ts">
+extendCompodiumMeta({
+  combo: ['size', 'variant'],
+  defaultProps: {
+    label: 'Click me!',
+    loading: true
+  }
+})
+</script>
+
+<template>
+  <UButton />
+</template>
--- a/playground/compodium/examples/UButton/UButtonExampleSizes.vue
+++ b/playground/compodium/examples/UButton/UButtonExampleSizes.vue
@@ -0,0 +1,12 @@
+<script setup lang="ts">
+extendCompodiumMeta({
+  combo: ['size', 'variant'],
+  defaultProps: {
+    label: 'Click me!'
+  }
+})
+</script>
+
+<template>
+  <UButton />
+</template>
--- a/playground/compodium/examples/UButtonGroup/UButtonGroupExample.vue
+++ b/playground/compodium/examples/UButtonGroup/UButtonGroupExample.vue
@@ -0,0 +1,55 @@
+<script setup lang="ts">
+defineOptions({
+  inheritAttrs: false
+})
+</script>
+
+<template>
+  <div class="flex flex-col gap-4">
+    <UButtonGroup v-bind="$attrs">
+      <UButton>Button</UButton>
+    </UButtonGroup>
+
+    <UButtonGroup v-bind="$attrs">
+      <UInput placeholder="Search..." />
+    </UButtonGroup>
+
+    <UButtonGroup v-bind="$attrs">
+      <UButton color="neutral" variant="outline">
+        Button
+      </UButton>
+      <UButton color="neutral" variant="subtle">
+        Button
+      </UButton>
+      <UButton color="neutral" variant="outline">
+        Button
+      </UButton>
+    </UButtonGroup>
+
+    <UButtonGroup v-bind="$attrs" orientation="vertical">
+      <UButton color="neutral" variant="outline">
+        Button
+      </UButton>
+      <UInput placeholder="Search..." />
+    </UButtonGroup>
+
+    <UButtonGroup v-bind="$attrs">
+      <UButton color="neutral" variant="outline">
+        Button
+      </UButton>
+      <UInput placeholder="Search..." />
+    </UButtonGroup>
+
+    <UButtonGroup v-bind="$attrs">
+      <UInput placeholder="Search..." />
+      <UButton color="neutral" variant="outline">
+        Button
+      </UButton>
+    </UButtonGroup>
+
+    <UButtonGroup v-bind="$attrs">
+      <UBadge color="neutral" variant="outline" size="lg" label="https://" />
+      <UInput color="neutral" variant="outline" placeholder="www.example.com" />
+    </UButtonGroup>
+  </div>
+</template>
--- a/playground/compodium/examples/UButtonGroup/UButtonGroupExampleSizes.vue
+++ b/playground/compodium/examples/UButtonGroup/UButtonGroupExampleSizes.vue
@@ -0,0 +1,14 @@
+<script setup lang="ts">
+extendCompodiumMeta({
+  combo: ['size', 'orientation']
+})
+</script>
+
+<template>
+  <UButtonGroup v-bind="$attrs">
+    <UButton color="neutral" variant="outline">
+      Button
+    </UButton>
+    <UInput placeholder="Search..." />
+  </UButtonGroup>
+</template>
--- a/playground/compodium/examples/UCard/UCardExample.vue
+++ b/playground/compodium/examples/UCard/UCardExample.vue
@@ -0,0 +1,13 @@
+<template>
+  <UCard class="w-96">
+    <template #header>
+      <Placeholder class="h-8" />
+    </template>
+
+    <Placeholder class="h-32" />
+
+    <template #footer>
+      <Placeholder class="h-8" />
+    </template>
+  </UCard>
+</template>
--- a/playground/compodium/examples/UCarousel/UCarouselExample.vue
+++ b/playground/compodium/examples/UCarousel/UCarouselExample.vue
@@ -0,0 +1,23 @@
+<script setup lang="ts">
+extendCompodiumMeta({
+  defaultProps: {
+    items: [
+      'https://picsum.photos/320/320?v=1',
+      'https://picsum.photos/320/320?v=2',
+      'https://picsum.photos/320/320?v=3'
+    ]
+  }
+})
+</script>
+
+<template>
+  <UCarousel
+    v-slot="{ item }"
+    class="w-xs h-xs"
+  >
+    <img
+      :src="item"
+      class="rounded-lg"
+    >
+  </UCarousel>
+</template>
--- a/playground/compodium/examples/UCheckbox/UCheckboxExample.vue
+++ b/playground/compodium/examples/UCheckbox/UCheckboxExample.vue
@@ -0,0 +1,13 @@
+<script setup lang="ts">
+extendCompodiumMeta({
+  combo: ['size', 'color'],
+  defaultProps: {
+    label: 'Click me!',
+    modelValue: true
+  }
+})
+</script>
+
+<template>
+  <UCheckbox />
+</template>
--- a/playground/compodium/examples/UCheckbox/UCheckboxExampleDescription.vue
+++ b/playground/compodium/examples/UCheckbox/UCheckboxExampleDescription.vue
@@ -0,0 +1,14 @@
+<script setup lang="ts">
+extendCompodiumMeta({
+  combo: ['size', 'color'],
+  defaultProps: {
+    label: 'Click me!',
+    description: 'This is a description',
+    modelValue: true
+  }
+})
+</script>
+
+<template>
+  <UCheckbox />
+</template>
--- a/playground/compodium/examples/UCheckbox/UCheckboxExampleIcon.vue
+++ b/playground/compodium/examples/UCheckbox/UCheckboxExampleIcon.vue
@@ -0,0 +1,14 @@
+<script setup lang="ts">
+extendCompodiumMeta({
+  combo: ['size', 'color'],
+  defaultProps: {
+    label: 'Click me!',
+    icon: 'lucide:heart',
+    modelValue: true
+  }
+})
+</script>
+
+<template>
+  <UCheckbox />
+</template>
--- a/playground/compodium/examples/UCheckbox/UCheckboxExampleIndeterminate.vue
+++ b/playground/compodium/examples/UCheckbox/UCheckboxExampleIndeterminate.vue
@@ -0,0 +1,14 @@
+<script setup lang="ts">
+extendCompodiumMeta({
+  combo: ['size', 'color'],
+  defaultProps: {
+    label: 'Click me!',
+    modelValue: 'indeterminate',
+    indeterminate: true
+  }
+})
+</script>
+
+<template>
+  <UCheckbox />
+</template>
--- a/playground/compodium/examples/UChip/UChipExample.vue
+++ b/playground/compodium/examples/UChip/UChipExample.vue
@@ -0,0 +1,5 @@
+<template>
+  <UChip>
+    <UButton icon="i-lucide-inbox" color="neutral" variant="subtle" />
+  </UChip>
+</template>
--- a/playground/compodium/examples/UChip/UChipExamplePositions.vue
+++ b/playground/compodium/examples/UChip/UChipExamplePositions.vue
@@ -0,0 +1,11 @@
+<script setup lang="ts">
+extendCompodiumMeta({
+  combo: ['position']
+})
+</script>
+
+<template>
+  <UChip>
+    <UButton icon="i-lucide-inbox" color="neutral" variant="subtle" />
+  </UChip>
+</template>
--- a/playground/compodium/examples/UChip/UChipExampleSizes.vue
+++ b/playground/compodium/examples/UChip/UChipExampleSizes.vue
@@ -0,0 +1,11 @@
+<script setup lang="ts">
+extendCompodiumMeta({
+  combo: ['size']
+})
+</script>
+
+<template>
+  <UChip>
+    <UAvatar src="https://github.com/benjamincanac.png" />
+  </UChip>
+</template>
--- a/playground/compodium/examples/UCollapsible/UCollapsibleExample.vue
+++ b/playground/compodium/examples/UCollapsible/UCollapsibleExample.vue
@@ -0,0 +1,24 @@
+<script setup lang="ts">
+import { useAppConfig } from '#imports'
+
+const appConfig = useAppConfig()
+</script>
+
+<template>
+  <UCollapsible class="flex flex-col gap-2 w-48">
+    <UButton
+      class="group"
+      icon="i-lucide-lightbulb"
+      :trailing-icon="appConfig.ui.icons.chevronDown"
+      color="neutral"
+      variant="outline"
+      label="Open"
+      block
+      :ui="{ trailingIcon: 'group-data-[state=open]:rotate-180 transition-transform duration-200' }"
+    />
+
+    <template #content>
+      <Placeholder class="h-96 w-full" />
+    </template>
+  </UCollapsible>
+</template>
--- a/playground/compodium/examples/UCommandPalette/UCommandPaletteExample.vue
+++ b/playground/compodium/examples/UCommandPalette/UCommandPaletteExample.vue
@@ -0,0 +1,104 @@
+<script setup lang="ts">
+import type { User } from '~/types'
+import { ref, computed, useFetch, useToast } from '#imports'
+
+const toast = useToast()
+
+const open = ref(false)
+const searchTerm = ref('')
+const selected = ref([])
+
+const { data: users, status } = await useFetch('https://jsonplaceholder.typicode.com/users', {
+  transform: (data: User[]) => {
+    return data?.map(user => ({ id: user.id, label: user.name, suffix: user.email, avatar: { src: `https://i.pravatar.cc/120?img=${user.id}` } })) || []
+  },
+  lazy: true
+})
+
+const loading = ref(false)
+
+const groups = computed(() => [{
+  id: 'users',
+  label: searchTerm.value ? `Users matching “${searchTerm.value}”...` : 'Users',
+  items: users.value || []
+}, {
+  id: 'actions',
+  items: [{
+    label: 'Add new file',
+    suffix: 'Create a new file in the current directory or workspace.',
+    icon: 'i-lucide-file-plus',
+    loading: loading.value,
+    onSelect(e: Event) {
+      e.preventDefault()
+
+      toast.add({ title: 'New file added!' })
+
+      loading.value = true
+
+      setTimeout(() => {
+        loading.value = false
+      }, 2000)
+    },
+    kbds: ['meta', 'N']
+  }, {
+    label: 'Add new folder',
+    suffix: 'Create a new folder in the current directory or workspace.',
+    icon: 'i-lucide-folder-plus',
+    onSelect(e: Event) {
+      e.preventDefault()
+
+      toast.add({ title: 'New folder added!' })
+    },
+    kbds: ['meta', 'F']
+  }, {
+    label: 'Add hashtag',
+    suffix: 'Add a hashtag to the current item.',
+    icon: 'i-lucide-hash',
+    onSelect(e: Event) {
+      e.preventDefault()
+
+      toast.add({ title: 'Hashtag added!' })
+    },
+    kbds: ['meta', 'H']
+  }, {
+    label: 'Add label',
+    suffix: 'Add a label to the current item.',
+    icon: 'i-lucide-tag',
+    onSelect(e: Event) {
+      e.preventDefault()
+
+      toast.add({ title: 'Label added!' })
+    },
+    kbds: ['meta', 'L']
+  }]
+}])
+
+// function onSelect(item: typeof groups.value[number]['items'][number]) {
+function onSelect(item: any) {
+  console.log('Selected', item)
+}
+
+defineShortcuts({
+  meta_k: () => open.value = !open.value,
+  ...extractShortcuts(groups.value)
+})
+</script>
+
+<template>
+  <UCard :ui="{ body: '!p-0' }">
+    <UCommandPalette
+      v-model="selected"
+      v-model:search-term="searchTerm"
+      :loading="status === 'pending'"
+      :groups="groups"
+      :fuse="{
+        fuseOptions: {
+          includeMatches: true
+        }
+      }"
+      multiple
+      class="sm:max-h-80"
+      @update:model-value="onSelect"
+    />
+  </UCard>
+</template>
--- a/playground/compodium/examples/UCommandPalette/UCommandPaletteExampleDrawer.vue
+++ b/playground/compodium/examples/UCommandPalette/UCommandPaletteExampleDrawer.vue
@@ -0,0 +1,121 @@
+<script setup lang="ts">
+import { ref, computed, useFetch, useToast } from '#imports'
+import type { User } from '~/types'
+
+const toast = useToast()
+
+const searchTerm = ref('')
+const selected = ref([])
+
+const { data: users, status } = await useFetch('https://jsonplaceholder.typicode.com/users', {
+  // params: { q: searchTermDebounced },
+  transform: (data: User[]) => {
+    return data?.map(user => ({ id: user.id, label: user.name, suffix: user.email, avatar: { src: `https://i.pravatar.cc/120?img=${user.id}` } })) || []
+  },
+  lazy: true
+})
+
+const loading = ref(false)
+
+const groups = computed(() => [{
+  id: 'users',
+  label: searchTerm.value ? `Users matching “${searchTerm.value}”...` : 'Users',
+  items: users.value || []
+}, {
+  id: 'actions',
+  items: [{
+    label: 'Add new file',
+    suffix: 'Create a new file in the current directory or workspace.',
+    icon: 'i-lucide-file-plus',
+    loading: loading.value,
+    onSelect(e: Event) {
+      e.preventDefault()
+
+      toast.add({ title: 'New file added!' })
+
+      loading.value = true
+
+      setTimeout(() => {
+        loading.value = false
+      }, 2000)
+    },
+    kbds: ['meta', 'N']
+  }, {
+    label: 'Add new folder',
+    suffix: 'Create a new folder in the current directory or workspace.',
+    icon: 'i-lucide-folder-plus',
+    onSelect(e: Event) {
+      e.preventDefault()
+
+      toast.add({ title: 'New folder added!' })
+    },
+    kbds: ['meta', 'F']
+  }, {
+    label: 'Add hashtag',
+    suffix: 'Add a hashtag to the current item.',
+    icon: 'i-lucide-hash',
+    onSelect(e: Event) {
+      e.preventDefault()
+
+      toast.add({ title: 'Hashtag added!' })
+    },
+    kbds: ['meta', 'H']
+  }, {
+    label: 'Add label',
+    suffix: 'Add a label to the current item.',
+    icon: 'i-lucide-tag',
+    onSelect(e: Event) {
+      e.preventDefault()
+
+      toast.add({ title: 'Label added!' })
+    },
+    kbds: ['meta', 'L']
+  }]
+}])
+
+const labels = [{
+  label: 'bug',
+  chip: {
+    color: 'error' as const
+  }
+}, {
+  label: 'feature',
+  chip: {
+    color: 'success' as const
+  }
+}, {
+  label: 'enhancement',
+  chip: {
+    color: 'info' as const
+  }
+}]
+
+// function onSelect(item: typeof groups.value[number]['items'][number]) {
+function onSelect(item: any) {
+  console.log('Selected', item)
+}
+</script>
+
+<template>
+  <UDrawer should-scale-background>
+    <UButton label="Open in drawer" color="neutral" variant="outline" />
+
+    <template #content>
+      <UCommandPalette
+        v-model="selected"
+        v-model:search-term="searchTerm"
+        v-bind="$attrs"
+        :loading="status === 'pending'"
+        :groups="groups"
+        :fuse="{
+          fuseOptions: {
+            includeMatches: true
+          }
+        }"
+        multiple
+        class="sm:max-h-80 border-t border-(--ui-border) mt-4"
+        @update:model-value="onSelect"
+      />
+    </template>
+  </UDrawer>
+</template>
--- a/playground/compodium/examples/UCommandPalette/UCommandPaletteExampleModal.vue
+++ b/playground/compodium/examples/UCommandPalette/UCommandPaletteExampleModal.vue
@@ -0,0 +1,107 @@
+<script setup lang="ts">
+import type { User } from '~/types'
+import { ref, computed, useFetch, useToast } from '#imports'
+
+const toast = useToast()
+
+const open = ref(false)
+const searchTerm = ref('')
+const selected = ref([])
+
+const { data: users, status } = await useFetch('https://jsonplaceholder.typicode.com/users', {
+  // params: { q: searchTermDebounced },
+  transform: (data: User[]) => {
+    return data?.map(user => ({ id: user.id, label: user.name, suffix: user.email, avatar: { src: `https://i.pravatar.cc/120?img=${user.id}` } })) || []
+  },
+  lazy: true
+})
+
+const loading = ref(false)
+
+const groups = computed(() => [{
+  id: 'users',
+  label: searchTerm.value ? `Users matching “${searchTerm.value}”...` : 'Users',
+  items: users.value || []
+}, {
+  id: 'actions',
+  items: [{
+    label: 'Add new file',
+    suffix: 'Create a new file in the current directory or workspace.',
+    icon: 'i-lucide-file-plus',
+    loading: loading.value,
+    onSelect(e: Event) {
+      e.preventDefault()
+
+      toast.add({ title: 'New file added!' })
+
+      loading.value = true
+
+      setTimeout(() => {
+        loading.value = false
+      }, 2000)
+    },
+    kbds: ['meta', 'N']
+  }, {
+    label: 'Add new folder',
+    suffix: 'Create a new folder in the current directory or workspace.',
+    icon: 'i-lucide-folder-plus',
+    onSelect(e: Event) {
+      e.preventDefault()
+
+      toast.add({ title: 'New folder added!' })
+    },
+    kbds: ['meta', 'F']
+  }, {
+    label: 'Add hashtag',
+    suffix: 'Add a hashtag to the current item.',
+    icon: 'i-lucide-hash',
+    onSelect(e: Event) {
+      e.preventDefault()
+
+      toast.add({ title: 'Hashtag added!' })
+    },
+    kbds: ['meta', 'H']
+  }, {
+    label: 'Add label',
+    suffix: 'Add a label to the current item.',
+    icon: 'i-lucide-tag',
+    onSelect(e: Event) {
+      e.preventDefault()
+
+      toast.add({ title: 'Label added!' })
+    },
+    kbds: ['meta', 'L']
+  }]
+}])
+
+// function onSelect(item: typeof groups.value[number]['items'][number]) {
+function onSelect(item: any) {
+  console.log('Selected', item)
+}
+</script>
+
+<template>
+  <UModal v-model:open="open">
+    <UButton label="Open in modal" color="neutral" variant="outline" />
+
+    <template #content>
+      <UCommandPalette
+        v-bind="$attrs"
+        v-model="selected"
+        v-model:search-term="searchTerm"
+        :loading="status === 'pending'"
+        :groups="groups"
+        :fuse="{
+          fuseOptions: {
+            includeMatches: true
+          }
+        }"
+        multiple
+        close
+        class="sm:max-h-80"
+        @update:open="open = $event"
+        @update:model-value="onSelect"
+      />
+    </template>
+  </UModal>
+</template>
--- a/playground/compodium/examples/UCommandPalette/UCommandPaletteExamplePopover.vue
+++ b/playground/compodium/examples/UCommandPalette/UCommandPaletteExamplePopover.vue
@@ -0,0 +1,32 @@
+<script setup lang="ts">
+import { ref } from '#imports'
+
+const labels = [{
+  label: 'bug',
+  chip: {
+    color: 'error' as const
+  }
+}, {
+  label: 'feature',
+  chip: {
+    color: 'success' as const
+  }
+}, {
+  label: 'enhancement',
+  chip: {
+    color: 'info' as const
+  }
+}]
+
+const label = ref()
+</script>
+
+<template>
+  <UPopover :content="{ side: 'right', align: 'start' }">
+    <UButton label="Select label (popover)" color="neutral" variant="outline" />
+
+    <template #content>
+      <UCommandPalette v-model="label" placeholder="Search labels..." :groups="[{ id: 'labels', items: labels }]" :ui="{ input: '[&>input]:h-9' }" />
+    </template>
+  </UPopover>
+</template>
--- a/playground/compodium/examples/UContainerExample.vue
+++ b/playground/compodium/examples/UContainerExample.vue
@@ -0,0 +1,12 @@
+<script setup lang="ts">
+extendCompodiumMeta({
+  defaultProps: {
+  }
+})
+</script>
+
+<template>
+  <UContainer>
+    <Placeholder class="h-32 aspect-video" />
+  </UContainer>
+</template>
--- a/playground/compodium/examples/UContextMenuExample.vue
+++ b/playground/compodium/examples/UContextMenuExample.vue
@@ -0,0 +1,28 @@
+<script setup lang="ts">
+extendCompodiumMeta({
+  defaultProps: {
+    items: [
+      {
+        label: 'System',
+        icon: 'i-lucide-monitor'
+      },
+      {
+        label: 'Light',
+        icon: 'i-lucide-sun'
+      },
+      {
+        label: 'Dark',
+        icon: 'i-lucide-moon'
+      }
+    ]
+  }
+})
+</script>
+
+<template>
+  <UContextMenu>
+    <Placeholder class="aspect-video w-72">
+      Right click here
+    </Placeholder>
+  </UContextMenu>
+</template>
--- a/playground/compodium/examples/UDrawerExample.vue
+++ b/playground/compodium/examples/UDrawerExample.vue
@@ -0,0 +1,12 @@
+<template>
+  <UDrawer>
+    <UButton
+      color="neutral"
+      variant="outline"
+      label="Open Drawer"
+    />
+    <template #body>
+      <div class="size-96" />
+    </template>
+  </UDrawer>
+</template>
--- a/playground/compodium/examples/UDropdownMenuExample.vue
+++ b/playground/compodium/examples/UDropdownMenuExample.vue
@@ -0,0 +1,9 @@
+<template>
+  <UDropdownMenu>
+    <UButton
+      label="Open Menu"
+      color="neutral"
+      variant="outline"
+    />
+  </UDropdownMenu>
+</template>
--- a/playground/compodium/examples/UFormExample.vue
+++ b/playground/compodium/examples/UFormExample.vue
@@ -0,0 +1,36 @@
+<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>
--- a/playground/compodium/examples/UFormFieldExample.vue
+++ b/playground/compodium/examples/UFormFieldExample.vue
@@ -0,0 +1,13 @@
+<script setup lang="ts">
+extendCompodiumMeta({
+  defaultProps: {
+    label: 'Label'
+  }
+})
+</script>
+
+<template>
+  <UFormField>
+    <UInput />
+  </UFormField>
+</template>
--- a/playground/compodium/examples/UIconExample.vue
+++ b/playground/compodium/examples/UIconExample.vue
@@ -0,0 +1,11 @@
+<script setup lang="ts">
+extendCompodiumMeta({
+  defaultProps: {
+    name: 'lucide:rocket'
+  }
+})
+</script>
+
+<template>
+  <UIcon />
+</template>
--- a/playground/compodium/examples/UInputMenuExample.vue
+++ b/playground/compodium/examples/UInputMenuExample.vue
@@ -0,0 +1,11 @@
+<script setup lang="ts">
+extendCompodiumMeta({
+  defaultProps: {
+    items: ['Option 1', 'Option 2', 'Option 3']
+  }
+})
+</script>
+
+<template>
+  <UInputMenu />
+</template>
--- a/playground/compodium/examples/UKbdExample.vue
+++ b/playground/compodium/examples/UKbdExample.vue
@@ -0,0 +1,11 @@
+<script setup lang="ts">
+extendCompodiumMeta({
+  defaultProps: {
+    value: 'K'
+  }
+})
+</script>
+
+<template>
+  <UKbd />
+</template>
--- a/playground/compodium/examples/ULinkExample.vue
+++ b/playground/compodium/examples/ULinkExample.vue
@@ -0,0 +1,5 @@
+<template>
+  <ULink>
+    Link
+  </ULink>
+</template>
--- a/playground/compodium/examples/UModalExample.vue
+++ b/playground/compodium/examples/UModalExample.vue
@@ -0,0 +1,12 @@
+<template>
+  <UModal>
+    <UButton
+      label="Open Modal"
+      color="neutral"
+      variant="outline"
+    />
+    <template #content>
+      <div class="h-72" />
+    </template>
+  </UModal>
+</template>
--- a/playground/compodium/examples/UNavigationMenuExample.vue
+++ b/playground/compodium/examples/UNavigationMenuExample.vue
@@ -0,0 +1,43 @@
+<script setup lang="ts">
+extendCompodiumMeta({
+  defaultProps: {
+    items: [
+      [{
+        label: 'Documentation',
+        icon: 'i-lucide-book-open',
+        badge: 10,
+        children: [{
+          label: 'Introduction',
+          description: 'Fully styled and customizable components for Nuxt.',
+          icon: 'i-lucide-house'
+        }, {
+          label: 'Installation',
+          description: 'Learn how to install and configure Nuxt UI in your application.',
+          icon: 'i-lucide-cloud-download'
+        }, {
+          label: 'Theming',
+          description: 'Learn how to customize the look and feel of the components.',
+          icon: 'i-lucide-swatch-book'
+        }, {
+          label: 'Shortcuts',
+          description: 'Learn how to display and define keyboard shortcuts in your app.',
+          icon: 'i-lucide-monitor'
+        }]
+      }, {
+        label: 'GitHub',
+        icon: 'i-simple-icons-github',
+        to: 'https://github.com/nuxt/ui',
+        target: '_blank'
+      }, {
+        label: 'Help',
+        icon: 'i-lucide-circle-help',
+        disabled: true
+      }]
+    ]
+  }
+})
+</script>
+
+<template>
+  <UNavigationMenu />
+</template>
--- a/playground/compodium/examples/UPaginationExample.vue
+++ b/playground/compodium/examples/UPaginationExample.vue
@@ -0,0 +1,11 @@
+<script setup lang="ts">
+extendCompodiumMeta({
+  defaultProps: {
+    total: 50
+  }
+})
+</script>
+
+<template>
+  <UPagination />
+</template>
--- a/playground/compodium/examples/UPopoverExample.vue
+++ b/playground/compodium/examples/UPopoverExample.vue
@@ -0,0 +1,12 @@
+<template>
+  <UPopover>
+    <UButton
+      label="Open Popover"
+      color="neutral"
+      variant="outline"
+    />
+    <template #content>
+      <Placeholder class="aspect-video w-60" />
+    </template>
+  </UPopover>
+</template>
--- a/playground/compodium/examples/URadioGroupExample.vue
+++ b/playground/compodium/examples/URadioGroupExample.vue
@@ -0,0 +1,11 @@
+<script setup lang="ts">
+extendCompodiumMeta({
+  defaultProps: {
+    items: ['Option 1', 'Option 2', 'Option 3']
+  }
+})
+</script>
+
+<template>
+  <URadioGroup />
+</template>
--- a/playground/compodium/examples/USelectExample.vue
+++ b/playground/compodium/examples/USelectExample.vue
@@ -0,0 +1,12 @@
+<script setup lang="ts">
+extendCompodiumMeta({
+  defaultProps: {
+    defaultValue: 'Option 1',
+    items: ['Option 1', 'Option 2', 'Option 3']
+  }
+})
+</script>
+
+<template>
+  <USelect />
+</template>
--- a/playground/compodium/examples/USelectMenuExample.vue
+++ b/playground/compodium/examples/USelectMenuExample.vue
@@ -0,0 +1,11 @@
+<script setup lang="ts">
+extendCompodiumMeta({
+  defaultProps: {
+    items: ['Option 1', 'Option 2', 'Option 3']
+  }
+})
+</script>
+
+<template>
+  <USelectMenu />
+</template>
--- a/playground/compodium/examples/USkeletonExample.vue
+++ b/playground/compodium/examples/USkeletonExample.vue
@@ -0,0 +1,3 @@
+<template>
+  <USkeleton class="h-32 w-96" />
+</template>
--- a/playground/compodium/examples/USlideoverExample.vue
+++ b/playground/compodium/examples/USlideoverExample.vue
@@ -0,0 +1,12 @@
+<template>
+  <USlideover>
+    <UButton
+      color="neutral"
+      variant="outline"
+      label="Open Slideover"
+    />
+    <template #body>
+      <div class="size-96" />
+    </template>
+  </USlideover>
+</template>
--- a/playground/compodium/examples/UStepperExample.vue
+++ b/playground/compodium/examples/UStepperExample.vue
@@ -0,0 +1,51 @@
+<script setup lang="ts">
+import { ref } from 'vue'
+
+const items = [
+  {
+    slot: 'address',
+    title: 'Address',
+    description: 'Add your address here',
+    icon: 'i-lucide-house'
+  }, {
+    slot: 'shipping',
+    title: 'Shipping',
+    description: 'Set your preferred shipping method',
+    icon: 'i-lucide-truck'
+  }, {
+    slot: 'checkout',
+    title: 'Checkout',
+    description: 'Confirm your order'
+  }
+]
+
+const stepper = ref()
+</script>
+
+<template>
+  <UStepper
+    ref="stepper"
+    :items="items"
+  >
+    <template #content="{ item }">
+      <div class="size-full min-h-60 min-w-60 flex items-center justify-center">
+        {{ item.title }}
+      </div>
+      <div class="flex gap-2 justify-between mt-2">
+        <UButton
+          variant="outline"
+          leading-icon="i-lucide-arrow-left"
+          @click="stepper.previous()"
+        >
+          Back
+        </UButton>
+        <UButton
+          trailing-icon="i-lucide-arrow-right"
+          @click="stepper.next()"
+        >
+          Next
+        </UButton>
+      </div>
+    </template>
+  </UStepper>
+</template>
--- a/playground/compodium/examples/USwitchExample.vue
+++ b/playground/compodium/examples/USwitchExample.vue
@@ -0,0 +1,11 @@
+<script setup lang="ts">
+extendCompodiumMeta({
+  defaultProps: {
+    label: 'Switch me!'
+  }
+})
+</script>
+
+<template>
+  <USwitch />
+</template>
--- a/playground/compodium/examples/UTableExample.vue
+++ b/playground/compodium/examples/UTableExample.vue
@@ -0,0 +1,48 @@
+<script setup lang="ts">
+import { ref } from 'vue'
+
+const data = ref([
+  {
+    id: '4600',
+    date: '2024-03-11T15:30:00',
+    status: 'paid',
+    email: 'james.anderson@example.com',
+    amount: 594
+  },
+  {
+    id: '4599',
+    date: '2024-03-11T10:10:00',
+    status: 'failed',
+    email: 'mia.white@example.com',
+    amount: 276
+  },
+  {
+    id: '4598',
+    date: '2024-03-11T08:50:00',
+    status: 'refunded',
+    email: 'william.brown@example.com',
+    amount: 315
+  },
+  {
+    id: '4597',
+    date: '2024-03-10T19:45:00',
+    status: 'paid',
+    email: 'emma.davis@example.com',
+    amount: 529
+  },
+  {
+    id: '4596',
+    date: '2024-03-10T15:55:00',
+    status: 'paid',
+    email: 'ethan.harris@example.com',
+    amount: 639
+  }
+])
+</script>
+
+<template>
+  <UTable
+    :data="data"
+    class="flex-1"
+  />
+</template>
--- a/playground/compodium/examples/UTabsExample.vue
+++ b/playground/compodium/examples/UTabsExample.vue
@@ -0,0 +1,23 @@
+<script setup lang="ts">
+extendCompodiumMeta({
+  defaultProps: {
+    items: [{
+      label: 'Tab 1',
+      avatar: { src: 'https://avatars.githubusercontent.com/u/739984?v=4' },
+      content: 'This is the content shown for Tab 1'
+    }, {
+      label: 'Tab 2',
+      icon: 'i-lucide-user',
+      content: 'And, this is the content for Tab 2'
+    }, {
+      label: 'Tab 3',
+      icon: 'i-lucide-bell',
+      content: 'Finally, this is the content for Tab 3'
+    }]
+  }
+})
+</script>
+
+<template>
+  <UTabs />
+</template>
--- a/playground/compodium/examples/UToasterExample.vue
+++ b/playground/compodium/examples/UToasterExample.vue
@@ -0,0 +1,12 @@
+<script setup lang="ts">
+const toast = useToast()
+</script>
+
+<template>
+  <UButton
+    color="neutral"
+    variant="outline"
+    label="Open Toast"
+    @click="toast.add({ title: 'Heads up!' })"
+  />
+</template>
--- a/playground/compodium/examples/UTooltipExample.vue
+++ b/playground/compodium/examples/UTooltipExample.vue
@@ -0,0 +1,17 @@
+<script setup lang="ts">
+extendCompodiumMeta({
+  defaultProps: {
+    text: 'Tooltip'
+  }
+})
+</script>
+
+<template>
+  <UTooltip v-bind="$attrs">
+    <UButton
+      label="Show Tooltip"
+      color="neutral"
+      variant="subtle"
+    />
+  </UTooltip>
+</template>
--- a/playground/compodium/examples/UTreeExample.vue
+++ b/playground/compodium/examples/UTreeExample.vue
@@ -0,0 +1,42 @@
+<script setup lang="ts">
+extendCompodiumMeta({
+  defaultProps: {
+    items: [
+      {
+        label: 'app',
+        icon: 'i-lucide-folder',
+        defaultExpanded: true,
+        children: [{
+          label: 'composables',
+          icon: 'i-lucide-folder',
+          defaultExpanded: true,
+          children: [
+            { label: 'useAuth.ts', icon: 'vscode-icons:file-type-typescript' },
+            { label: 'useUser.ts', icon: 'vscode-icons:file-type-typescript' }
+          ]
+        },
+        {
+          label: 'components',
+          icon: 'i-lucide-folder',
+          children: [
+            {
+              label: 'Home',
+              icon: 'i-lucide-folder',
+              children: [
+                { label: 'Card.vue', icon: 'vscode-icons:file-type-vue' },
+                { label: 'Button.vue', icon: 'vscode-icons:file-type-vue' }
+              ]
+            }
+          ]
+        }]
+      },
+      { label: 'app.vue', icon: 'vscode-icons:file-type-vue' },
+      { label: 'nuxt.config.ts', icon: 'vscode-icons:file-type-nuxt' }
+    ]
+  }
+})
+</script>
+
+<template>
+  <UTree />
+</template>
--- a/playground/compodium/preview.vue
+++ b/playground/compodium/preview.vue
@@ -0,0 +1,7 @@
+<template>
+  <UApp>
+    <div class="flex justify-center items-center w-content min-h-screen py-16 px-8">
+      <slot />
+    </div>
+  </UApp>
+</template>
--- a/playground/nuxt.config.ts
+++ b/playground/nuxt.config.ts
@@ -1,9 +1,5 @@
 export default defineNuxtConfig({
-  modules: [
-    '../src/module',
-    '@nuxthub/core'
-  ],
-
+  modules: ['../src/module', '@nuxthub/core', '@compodium/nuxt'],
  devtools: {
    enabled: true
  },
@@ -21,5 +17,15 @@ export default defineNuxtConfig({
      // prevents reloading page when navigating between components
      include: ['@internationalized/date', '@vueuse/shared', '@vueuse/integrations/useFuse', '@tanstack/vue-table', 'reka-ui', 'reka-ui/namespaced', 'embla-carousel-vue', 'embla-carousel-autoplay', 'embla-carousel-auto-scroll', 'embla-carousel-auto-height', 'embla-carousel-class-names', 'embla-carousel-fade', 'embla-carousel-wheel-gestures', 'colortranslator', 'tailwindcss/colors', 'tailwind-variants', 'ufo', 'zod', 'vaul-vue']
    }
+  },
+
+  compodium: {
+    includeLibraryCollections: false,
+    ignore: ['**/App.vue', '**/*Example.vue', '**/Placeholder.vue', '**/*Content.vue', '**/*Provider.vue', 'UToast'],
+    extras: {
+      colors: {
+        neutral: 'slate'
+      }
+    }
  }
 })
--- a/playground/package.json
+++ b/playground/package.json
@@ -14,5 +14,8 @@
    "@nuxthub/core": "^0.8.18",
    "nuxt": "^3.16.1",
    "zod": "^3.24.2"
+  },
+  "devDependencies": {
+    "@compodium/nuxt": "0.1.0-beta.8"
  }
 }
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -322,6 +322,10 @@ importers:
      zod:
        specifier: ^3.24.2
        version: 3.24.2
+    devDependencies:
+      '@compodium/nuxt':
+        specifier: 0.1.0-beta.8
+        version: 0.1.0-beta.8(magicast@0.3.5)(typescript@5.6.3)(vite@6.2.3(@types/node@22.13.12)(jiti@2.4.2)(lightningcss@1.29.2)(terser@5.39.0)(yaml@2.7.0))(vue@3.5.13(typescript@5.6.3))

  playground-vue:
    dependencies:
@@ -338,6 +342,9 @@ importers:
        specifier: ^3.24.2
        version: 3.24.2
    devDependencies:
+      '@compodium/vue':
+        specifier: https://pkg.pr.new/romhml/compodium/@compodium/vue@18f083d
+        version: https://pkg.pr.new/romhml/compodium/@compodium/vue@18f083d(typescript@5.6.3)(vite@6.2.3(@types/node@22.13.12)(jiti@2.4.2)(lightningcss@1.29.2)(terser@5.39.0)(yaml@2.7.0))(vue@3.5.13(typescript@5.6.3))
      '@vitejs/plugin-vue':
        specifier: ^5.2.3
        version: 5.2.3(vite@6.2.3(@types/node@22.13.12)(jiti@2.4.2)(lightningcss@1.29.2)(terser@5.39.0)(yaml@2.7.0))(vue@3.5.13(typescript@5.6.3))
@@ -549,6 +556,58 @@ packages:
  '@cloudflare/workers-types@4.20250321.0':
    resolution: {integrity: sha512-jPwtZJC7tVFOwFazuwq96be8haTnY9qik8hJ+oLFi50d9LTWPPrnrNHC4OxZmJTEcPIAy0y1WFZHe8C/b7xFXQ==}

+  '@compodium/core@0.1.0-beta.8':
+    resolution: {integrity: sha512-sfb2ZLZz13J8stwV8AA/OdUisgUa5DVf/2Plsh1wOEHtacpup+QNxKyK9gyPggKQtfX8a1qCliqZC5NDm82Rfw==}
+    peerDependencies:
+      vite: '>=6'
+      vue: '>=3'
+    peerDependenciesMeta:
+      vite:
+        optional: true
+
+  '@compodium/core@https://pkg.pr.new/romhml/compodium/@compodium/core@18f083d1431d5d84f9d251ce996e186877e4ea5b':
+    resolution: {tarball: https://pkg.pr.new/romhml/compodium/@compodium/core@18f083d1431d5d84f9d251ce996e186877e4ea5b}
+    version: 0.0.0-18f083d1431d5d84f9d251ce996e186877e4ea5b
+    peerDependencies:
+      vite: '>=6'
+      vue: '>=3'
+    peerDependenciesMeta:
+      vite:
+        optional: true
+
+  '@compodium/examples@0.1.0-beta.8':
+    resolution: {integrity: sha512-AnYvdjIAFf9ULQTgAOXx44ky5bL4tzuxnZy7sKdsinALKChXJ92HAtHHdwdp0LWnUCrCXfNRGYEcI8yIK9uGVg==}
+
+  '@compodium/examples@https://pkg.pr.new/romhml/compodium/@compodium/examples@18f083d1431d5d84f9d251ce996e186877e4ea5b':
+    resolution: {tarball: https://pkg.pr.new/romhml/compodium/@compodium/examples@18f083d1431d5d84f9d251ce996e186877e4ea5b}
+    version: 0.0.0-18f083d1431d5d84f9d251ce996e186877e4ea5b
+
+  '@compodium/meta@0.1.0-beta.8':
+    resolution: {integrity: sha512-9E8pG0maJSxdFsaFnM3MFBACR6dF4faLTmKNzrOfv9jnh28RYhnyGXPYwyqiIUDZNz7Xoa9Yb6A5Nf32Y1C5MQ==}
+    peerDependencies:
+      typescript: 5.6.3
+    peerDependenciesMeta:
+      typescript:
+        optional: true
+
+  '@compodium/meta@https://pkg.pr.new/romhml/compodium/@compodium/meta@18f083d1431d5d84f9d251ce996e186877e4ea5b':
+    resolution: {tarball: https://pkg.pr.new/romhml/compodium/@compodium/meta@18f083d1431d5d84f9d251ce996e186877e4ea5b}
+    version: 0.0.0-18f083d1431d5d84f9d251ce996e186877e4ea5b
+    peerDependencies:
+      typescript: 5.6.3
+    peerDependenciesMeta:
+      typescript:
+        optional: true
+
+  '@compodium/nuxt@0.1.0-beta.8':
+    resolution: {integrity: sha512-paK9oXV/GOsFY9doTprFoJfQ2+snODj8Wq/d9bciBZwsLgVBt7qtqv26SiqJsdg0Z8EcFjjhmJxIRlybsWl6qw==}
+
+  '@compodium/vue@https://pkg.pr.new/romhml/compodium/@compodium/vue@18f083d':
+    resolution: {tarball: https://pkg.pr.new/romhml/compodium/@compodium/vue@18f083d}
+    version: 0.0.0-18f083d1431d5d84f9d251ce996e186877e4ea5b
+    peerDependencies:
+      vite: '>=6'
+
  '@conventional-changelog/git-client@1.0.1':
    resolution: {integrity: sha512-PJEqBwAleffCMETaVm/fUgHldzBE35JFk3/9LL6NUA5EXa3qednu+UT6M7E5iBu3zIQZCULYIiZ90fBYHt6xUw==}
    engines: {node: '>=18'}
@@ -1612,6 +1671,11 @@ packages:
    peerDependencies:
      vite: '>=6.0'

+  '@nuxt/devtools-kit@2.3.2':
+    resolution: {integrity: sha512-K0citnz9bSecPCLl4jGfE5I5St+E9XtDmOvYqq3ranGZGZ2Mvs5RwgUkaOrn4rulvUmBGBl7Exwh5YX9PONrEQ==}
+    peerDependencies:
+      vite: '>=6.0'
+
  '@nuxt/devtools-wizard@2.3.1':
    resolution: {integrity: sha512-FqJVncQ9XiVR3uVwnqxHysCShfwrsK8JL4Q8rNrQoY9ly0Q7h6vimX44asFZSSCQ25WYo74PikdvVKV/bZW+qg==}
    hasBin: true
@@ -4925,6 +4989,10 @@ packages:
    resolution: {integrity: sha512-ub9iytsEbT7Yw/Pd29mSo/cNQpaEu67zR1VVcXDiYjSFwzeBxNdTd0FMnSslLQXiRj8uGPzwsaoefrMD5XAmdw==}
    engines: {node: '>=16.14.0'}

+  magic-string-ast@0.8.0:
+    resolution: {integrity: sha512-e9eH6YOYl2OuDd3fNt2ciFhj/l2vxJmGeWLLcY+0NcW6k0Xitq7XIxN2++QVVhswXeJLy95SjF8oVKRyJC95GQ==}
+    engines: {node: '>=20.18.0'}
+
  magic-string@0.25.9:
    resolution: {integrity: sha512-RmF0AsMzgt25qzqqLc1+MbHmhdx0ojF2Fvs4XnOqz2ZOBXzzkEwc/dJQZCYHAn7v1jbVOjAZfK8msRn4BxO4VQ==}

@@ -6686,6 +6754,10 @@ packages:
  universal-user-agent@7.0.2:
    resolution: {integrity: sha512-0JCqzSKnStlRRQfCdowvqy3cy0Dvtlb8xecj/H8JFZuCze4rwjPZQOgvFvn0Ws/usCHQFGpyr+pB9adaGwXn4Q==}

+  unplugin-ast@0.14.4:
+    resolution: {integrity: sha512-9EWJqy9PblRP/7/6Fl2YSAXEuzkJmTMSmoWEd+NBlqHETDaYgd2hGrRNC2gHmz4Ec7lUVxeWKtowYmYuC+lJng==}
+    engines: {node: '>=18.12.0'}
+
  unplugin-auto-import@19.1.1:
    resolution: {integrity: sha512-sCGZZrSR1Bc8RfN8Q0RUDxXtC20rdAt7UB4lDyq8MNtKVHiXXh+5af6Nz4JRp9Q+7HjnbgQfQox0TkEymjdUAQ==}
    engines: {node: '>=14'}
@@ -7514,6 +7586,106 @@ snapshots:

  '@cloudflare/workers-types@4.20250321.0': {}

+  '@compodium/core@0.1.0-beta.8(typescript@5.6.3)(vite@6.2.3(@types/node@22.13.12)(jiti@2.4.2)(lightningcss@1.29.2)(terser@5.39.0)(yaml@2.7.0))(vue@3.5.13(typescript@5.6.3))':
+    dependencies:
+      '@compodium/examples': 0.1.0-beta.8
+      '@compodium/meta': 0.1.0-beta.8(typescript@5.6.3)
+      '@vueuse/core': 13.0.0(vue@3.5.13(typescript@5.6.3))
+      chokidar: 3.6.0
+      hookable: 5.5.3
+      pathe: 2.0.3
+      scule: 1.3.0
+      sirv: 3.0.1
+      tinyglobby: 0.2.12
+      ufo: 1.5.4
+      unplugin: 2.2.2
+      unplugin-ast: 0.14.4
+      vue: 3.5.13(typescript@5.6.3)
+      zod: 3.24.2
+    optionalDependencies:
+      vite: 6.2.3(@types/node@22.13.12)(jiti@2.4.2)(lightningcss@1.29.2)(terser@5.39.0)(yaml@2.7.0)
+    transitivePeerDependencies:
+      - typescript
+
+  '@compodium/core@https://pkg.pr.new/romhml/compodium/@compodium/core@18f083d1431d5d84f9d251ce996e186877e4ea5b(typescript@5.6.3)(vite@6.2.3(@types/node@22.13.12)(jiti@2.4.2)(lightningcss@1.29.2)(terser@5.39.0)(yaml@2.7.0))(vue@3.5.13(typescript@5.6.3))':
+    dependencies:
+      '@compodium/examples': https://pkg.pr.new/romhml/compodium/@compodium/examples@18f083d1431d5d84f9d251ce996e186877e4ea5b
+      '@compodium/meta': https://pkg.pr.new/romhml/compodium/@compodium/meta@18f083d1431d5d84f9d251ce996e186877e4ea5b(typescript@5.6.3)
+      '@vueuse/core': 13.0.0(vue@3.5.13(typescript@5.6.3))
+      chokidar: 3.6.0
+      hookable: 5.5.3
+      pathe: 2.0.3
+      scule: 1.3.0
+      sirv: 3.0.1
+      tinyglobby: 0.2.12
+      ufo: 1.5.4
+      unplugin: 2.2.2
+      unplugin-ast: 0.14.4
+      vue: 3.5.13(typescript@5.6.3)
+      zod: 3.24.2
+    optionalDependencies:
+      vite: 6.2.3(@types/node@22.13.12)(jiti@2.4.2)(lightningcss@1.29.2)(terser@5.39.0)(yaml@2.7.0)
+    transitivePeerDependencies:
+      - typescript
+
+  '@compodium/examples@0.1.0-beta.8':
+    dependencies:
+      pathe: 2.0.3
+      scule: 1.3.0
+
+  '@compodium/examples@https://pkg.pr.new/romhml/compodium/@compodium/examples@18f083d1431d5d84f9d251ce996e186877e4ea5b':
+    dependencies:
+      pathe: 2.0.3
+      scule: 1.3.0
+
+  '@compodium/meta@0.1.0-beta.8(typescript@5.6.3)':
+    dependencies:
+      '@volar/typescript': 2.4.12
+      '@vue/language-core': 2.2.8(typescript@5.6.3)
+      pathe: 2.0.3
+      vue-component-meta: 2.2.8(typescript@5.6.3)
+      vue-component-type-helpers: 2.2.8
+    optionalDependencies:
+      typescript: 5.6.3
+
+  '@compodium/meta@https://pkg.pr.new/romhml/compodium/@compodium/meta@18f083d1431d5d84f9d251ce996e186877e4ea5b(typescript@5.6.3)':
+    dependencies:
+      '@volar/typescript': 2.4.12
+      '@vue/language-core': 2.2.8(typescript@5.6.3)
+      pathe: 2.0.3
+      vue-component-meta: 2.2.8(typescript@5.6.3)
+      vue-component-type-helpers: 2.2.8
+    optionalDependencies:
+      typescript: 5.6.3
+
+  '@compodium/nuxt@0.1.0-beta.8(magicast@0.3.5)(typescript@5.6.3)(vite@6.2.3(@types/node@22.13.12)(jiti@2.4.2)(lightningcss@1.29.2)(terser@5.39.0)(yaml@2.7.0))(vue@3.5.13(typescript@5.6.3))':
+    dependencies:
+      '@compodium/core': 0.1.0-beta.8(typescript@5.6.3)(vite@6.2.3(@types/node@22.13.12)(jiti@2.4.2)(lightningcss@1.29.2)(terser@5.39.0)(yaml@2.7.0))(vue@3.5.13(typescript@5.6.3))
+      '@nuxt/devtools-kit': 2.3.2(magicast@0.3.5)(vite@6.2.3(@types/node@22.13.12)(jiti@2.4.2)(lightningcss@1.29.2)(terser@5.39.0)(yaml@2.7.0))
+      '@nuxt/kit': 3.16.1(magicast@0.3.5)
+      consola: 3.4.2
+      defu: 6.1.4
+      ufo: 1.5.4
+    transitivePeerDependencies:
+      - magicast
+      - typescript
+      - vite
+      - vue
+
+  '@compodium/vue@https://pkg.pr.new/romhml/compodium/@compodium/vue@18f083d(typescript@5.6.3)(vite@6.2.3(@types/node@22.13.12)(jiti@2.4.2)(lightningcss@1.29.2)(terser@5.39.0)(yaml@2.7.0))(vue@3.5.13(typescript@5.6.3))':
+    dependencies:
+      '@compodium/core': https://pkg.pr.new/romhml/compodium/@compodium/core@18f083d1431d5d84f9d251ce996e186877e4ea5b(typescript@5.6.3)(vite@6.2.3(@types/node@22.13.12)(jiti@2.4.2)(lightningcss@1.29.2)(terser@5.39.0)(yaml@2.7.0))(vue@3.5.13(typescript@5.6.3))
+      '@compodium/examples': https://pkg.pr.new/romhml/compodium/@compodium/examples@18f083d1431d5d84f9d251ce996e186877e4ea5b
+      '@vue/devtools-kit': 7.7.2
+      consola: 3.4.2
+      defu: 6.1.4
+      pathe: 2.0.3
+      unplugin: 2.2.2
+      vite: 6.2.3(@types/node@22.13.12)(jiti@2.4.2)(lightningcss@1.29.2)(terser@5.39.0)(yaml@2.7.0)
+    transitivePeerDependencies:
+      - typescript
+      - vue
+
  '@conventional-changelog/git-client@1.0.1(conventional-commits-filter@5.0.0)(conventional-commits-parser@6.1.0)':
    dependencies:
      '@types/semver': 7.5.8
@@ -8360,6 +8532,15 @@ snapshots:
    transitivePeerDependencies:
      - magicast

+  '@nuxt/devtools-kit@2.3.2(magicast@0.3.5)(vite@6.2.3(@types/node@22.13.12)(jiti@2.4.2)(lightningcss@1.29.2)(terser@5.39.0)(yaml@2.7.0))':
+    dependencies:
+      '@nuxt/kit': 3.16.1(magicast@0.3.5)
+      '@nuxt/schema': 3.16.1
+      execa: 8.0.1
+      vite: 6.2.3(@types/node@22.13.12)(jiti@2.4.2)(lightningcss@1.29.2)(terser@5.39.0)(yaml@2.7.0)
+    transitivePeerDependencies:
+      - magicast
+
  '@nuxt/devtools-wizard@2.3.1':
    dependencies:
      consola: 3.4.2
@@ -12240,6 +12421,10 @@ snapshots:
    dependencies:
      magic-string: 0.30.17

+  magic-string-ast@0.8.0:
+    dependencies:
+      magic-string: 0.30.17
+
  magic-string@0.25.9:
    dependencies:
      sourcemap-codec: 1.4.8
@@ -14695,6 +14880,14 @@ snapshots:

  universal-user-agent@7.0.2: {}

+  unplugin-ast@0.14.4:
+    dependencies:
+      '@babel/generator': 7.26.10
+      ast-kit: 1.4.2
+      magic-string-ast: 0.8.0
+      unplugin: 2.2.2
+      unplugin-utils: 0.2.4
+
  unplugin-auto-import@19.1.1(@nuxt/kit@3.16.1(magicast@0.3.5))(@vueuse/core@13.0.0(vue@3.5.13(typescript@5.6.3))):
    dependencies:
      local-pkg: 1.1.1
Author	SHA1	Message	Date
Romain Hamel	3d62371af0	chore: up	2025-03-28 16:22:31 +01:00
Romain Hamel	f941df1541	chore: up	2025-03-28 08:58:21 +01:00
Romain Hamel	664e940098	chore: up	2025-03-26 13:45:17 +01:00
Romain Hamel	15fe0039f0	chore(playground): compodium setup	2025-03-26 11:40:23 +01:00
Romain Hamel	f68061975c	chore: setup compodium in playground	2025-03-24 15:08:07 +01:00