From 15fe0039f04698f65dbbfc1d9330d94f8868bc62 Mon Sep 17 00:00:00 2001
From: Romain Hamel <rom.hml@gmail.com>
Date: Wed, 26 Mar 2025 11:40:23 +0100
Subject: [PATCH] chore(playground): compodium setup

---
 playground/app/app.vue                        | 122 +-----------------
 playground/app/pages/components.vue           | 118 +++++++++++++++++
 playground/app/pages/index.vue                |  17 ++-
 .../examples/UAccordion/UAccordionExample.vue |  55 ++++++++
 .../examples/UAlert/UAlertExample.vue         |  12 ++
 .../examples/UAlert/UAlertExampleAction.vue   |  57 ++++++++
 .../examples/UAlert/UAlertExampleAvatar.vue   |  14 ++
 .../examples/UAlert/UAlertExampleIcon.vue     |  14 ++
 .../examples/UAlert/UAlertExampleVariants.vue |  13 ++
 .../examples/UAvatar/UAvatarExample.vue       |  11 ++
 .../examples/UAvatar/UAvatarExampleIcon.vue   |  12 ++
 .../UAvatar/UAvatarExampleLetters.vue         |  12 ++
 .../examples/UAvatar/UAvatarExampleSizes.vue  |  12 ++
 .../UAvatarGroup/UAvatarGroupExample.vue      |   7 +
 .../UAvatarGroup/UAvatarGroupExampleSizes.vue |  13 ++
 .../UAvatarGroupExampleWithChip.vue           |  15 +++
 .../examples/UBadge/UBadgeExample.vue         |  11 ++
 .../examples/UBadge/UBadgeExampleAvatar.vue   |  13 ++
 .../examples/UBadge/UBadgeExampleIcon.vue     |  13 ++
 .../examples/UBadge/UBadgeExampleSizes.vue    |  13 ++
 .../UBadgeExampleVariants.vue}                |   5 +-
 .../UBreadcrumb/UBreadcrumbExample.vue        |  30 +++++
 .../examples/{ => UButton}/UButtonExample.vue |   0
 .../{ => UButton}/UButtonExampleAvatar.vue    |   2 +-
 .../{ => UButton}/UButtonExampleIcon.vue      |   2 +-
 .../{ => UButton}/UButtonExampleLoading.vue   |   2 +-
 .../examples/UButton/UButtonExampleSizes.vue  |  12 ++
 .../UButtonGroup/UButtonGroupExample.vue      |  55 ++++++++
 .../UButtonGroup/UButtonGroupExampleSizes.vue |  14 ++
 .../compodium/examples/UCard/UCardExample.vue |  13 ++
 .../examples/UCarousel/UCarouselExample.vue   |  23 ++++
 .../UCheckboxExample.vue}                     |   6 +-
 .../UCheckbox/UCheckboxExampleDescription.vue |  14 ++
 .../UCheckbox/UCheckboxExampleIcon.vue        |  14 ++
 .../UCheckboxExampleIndeterminate.vue         |  14 ++
 .../compodium/examples/UChip/UChipExample.vue |   5 +
 .../examples/UChip/UChipExamplePositions.vue  |  11 ++
 .../examples/UChip/UChipExampleSizes.vue      |  11 ++
 .../UCollapsible/UCollapsibleExample.vue      |  24 ++++
 .../UCommandPaletteExample.vue                | 104 +++++++++++++++
 .../UCommandPaletteExampleDrawer.vue          | 121 +++++++++++++++++
 .../UCommandPaletteExampleModal.vue           | 107 +++++++++++++++
 .../UCommandPaletteExamplePopover.vue         |  32 +++++
 playground/compodium/preview.vue              |   7 +
 playground/nuxt.config.ts                     |   1 +
 playground/package.json                       |   4 +-
 pnpm-lock.yaml                                |  42 +++---
 47 files changed, 1077 insertions(+), 152 deletions(-)
 create mode 100644 playground/app/pages/components.vue
 create mode 100644 playground/compodium/examples/UAccordion/UAccordionExample.vue
 create mode 100644 playground/compodium/examples/UAlert/UAlertExample.vue
 create mode 100644 playground/compodium/examples/UAlert/UAlertExampleAction.vue
 create mode 100644 playground/compodium/examples/UAlert/UAlertExampleAvatar.vue
 create mode 100644 playground/compodium/examples/UAlert/UAlertExampleIcon.vue
 create mode 100644 playground/compodium/examples/UAlert/UAlertExampleVariants.vue
 create mode 100644 playground/compodium/examples/UAvatar/UAvatarExample.vue
 create mode 100644 playground/compodium/examples/UAvatar/UAvatarExampleIcon.vue
 create mode 100644 playground/compodium/examples/UAvatar/UAvatarExampleLetters.vue
 create mode 100644 playground/compodium/examples/UAvatar/UAvatarExampleSizes.vue
 create mode 100644 playground/compodium/examples/UAvatarGroup/UAvatarGroupExample.vue
 create mode 100644 playground/compodium/examples/UAvatarGroup/UAvatarGroupExampleSizes.vue
 create mode 100644 playground/compodium/examples/UAvatarGroup/UAvatarGroupExampleWithChip.vue
 create mode 100644 playground/compodium/examples/UBadge/UBadgeExample.vue
 create mode 100644 playground/compodium/examples/UBadge/UBadgeExampleAvatar.vue
 create mode 100644 playground/compodium/examples/UBadge/UBadgeExampleIcon.vue
 create mode 100644 playground/compodium/examples/UBadge/UBadgeExampleSizes.vue
 rename playground/compodium/examples/{UButtonExampleDisabled.vue => UBadge/UBadgeExampleVariants.vue} (70%)
 create mode 100644 playground/compodium/examples/UBreadcrumb/UBreadcrumbExample.vue
 rename playground/compodium/examples/{ => UButton}/UButtonExample.vue (100%)
 rename playground/compodium/examples/{ => UButton}/UButtonExampleAvatar.vue (85%)
 rename playground/compodium/examples/{ => UButton}/UButtonExampleIcon.vue (85%)
 rename playground/compodium/examples/{ => UButton}/UButtonExampleLoading.vue (84%)
 create mode 100644 playground/compodium/examples/UButton/UButtonExampleSizes.vue
 create mode 100644 playground/compodium/examples/UButtonGroup/UButtonGroupExample.vue
 create mode 100644 playground/compodium/examples/UButtonGroup/UButtonGroupExampleSizes.vue
 create mode 100644 playground/compodium/examples/UCard/UCardExample.vue
 create mode 100644 playground/compodium/examples/UCarousel/UCarouselExample.vue
 rename playground/compodium/examples/{UButtonExampleSizes.vue => UCheckbox/UCheckboxExample.vue} (62%)
 create mode 100644 playground/compodium/examples/UCheckbox/UCheckboxExampleDescription.vue
 create mode 100644 playground/compodium/examples/UCheckbox/UCheckboxExampleIcon.vue
 create mode 100644 playground/compodium/examples/UCheckbox/UCheckboxExampleIndeterminate.vue
 create mode 100644 playground/compodium/examples/UChip/UChipExample.vue
 create mode 100644 playground/compodium/examples/UChip/UChipExamplePositions.vue
 create mode 100644 playground/compodium/examples/UChip/UChipExampleSizes.vue
 create mode 100644 playground/compodium/examples/UCollapsible/UCollapsibleExample.vue
 create mode 100644 playground/compodium/examples/UCommandPalette/UCommandPaletteExample.vue
 create mode 100644 playground/compodium/examples/UCommandPalette/UCommandPaletteExampleDrawer.vue
 create mode 100644 playground/compodium/examples/UCommandPalette/UCommandPaletteExampleModal.vue
 create mode 100644 playground/compodium/examples/UCommandPalette/UCommandPaletteExamplePopover.vue
 create mode 100644 playground/compodium/preview.vue

diff --git a/playground/app/app.vue b/playground/app/app.vue
index d6880e78..8dd09d3f 100644
--- 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>
diff --git a/playground/app/pages/components.vue b/playground/app/pages/components.vue
new file mode 100644
index 00000000..683b478c
--- /dev/null
+++ 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>
diff --git a/playground/app/pages/index.vue b/playground/app/pages/index.vue
index 402cd16e..73cba8d1 100644
--- 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>
diff --git a/playground/compodium/examples/UAccordion/UAccordionExample.vue b/playground/compodium/examples/UAccordion/UAccordionExample.vue
new file mode 100644
index 00000000..ac1c30ba
--- /dev/null
+++ 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>
diff --git a/playground/compodium/examples/UAlert/UAlertExample.vue b/playground/compodium/examples/UAlert/UAlertExample.vue
new file mode 100644
index 00000000..7d1ac89f
--- /dev/null
+++ 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>
diff --git a/playground/compodium/examples/UAlert/UAlertExampleAction.vue b/playground/compodium/examples/UAlert/UAlertExampleAction.vue
new file mode 100644
index 00000000..e2ce6038
--- /dev/null
+++ 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>
diff --git a/playground/compodium/examples/UAlert/UAlertExampleAvatar.vue b/playground/compodium/examples/UAlert/UAlertExampleAvatar.vue
new file mode 100644
index 00000000..214b99ce
--- /dev/null
+++ 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>
diff --git a/playground/compodium/examples/UAlert/UAlertExampleIcon.vue b/playground/compodium/examples/UAlert/UAlertExampleIcon.vue
new file mode 100644
index 00000000..526e3b0c
--- /dev/null
+++ 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>
diff --git a/playground/compodium/examples/UAlert/UAlertExampleVariants.vue b/playground/compodium/examples/UAlert/UAlertExampleVariants.vue
new file mode 100644
index 00000000..c1436f28
--- /dev/null
+++ 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>
diff --git a/playground/compodium/examples/UAvatar/UAvatarExample.vue b/playground/compodium/examples/UAvatar/UAvatarExample.vue
new file mode 100644
index 00000000..06df6907
--- /dev/null
+++ 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>
diff --git a/playground/compodium/examples/UAvatar/UAvatarExampleIcon.vue b/playground/compodium/examples/UAvatar/UAvatarExampleIcon.vue
new file mode 100644
index 00000000..fbd23dbf
--- /dev/null
+++ 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>
diff --git a/playground/compodium/examples/UAvatar/UAvatarExampleLetters.vue b/playground/compodium/examples/UAvatar/UAvatarExampleLetters.vue
new file mode 100644
index 00000000..ed99c8e3
--- /dev/null
+++ 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>
diff --git a/playground/compodium/examples/UAvatar/UAvatarExampleSizes.vue b/playground/compodium/examples/UAvatar/UAvatarExampleSizes.vue
new file mode 100644
index 00000000..8e5fcc9c
--- /dev/null
+++ 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>
diff --git a/playground/compodium/examples/UAvatarGroup/UAvatarGroupExample.vue b/playground/compodium/examples/UAvatarGroup/UAvatarGroupExample.vue
new file mode 100644
index 00000000..805b964a
--- /dev/null
+++ 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>
diff --git a/playground/compodium/examples/UAvatarGroup/UAvatarGroupExampleSizes.vue b/playground/compodium/examples/UAvatarGroup/UAvatarGroupExampleSizes.vue
new file mode 100644
index 00000000..ee7c3397
--- /dev/null
+++ 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>
diff --git a/playground/compodium/examples/UAvatarGroup/UAvatarGroupExampleWithChip.vue b/playground/compodium/examples/UAvatarGroup/UAvatarGroupExampleWithChip.vue
new file mode 100644
index 00000000..28d0d14c
--- /dev/null
+++ 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>
diff --git a/playground/compodium/examples/UBadge/UBadgeExample.vue b/playground/compodium/examples/UBadge/UBadgeExample.vue
new file mode 100644
index 00000000..e77bf53e
--- /dev/null
+++ b/playground/compodium/examples/UBadge/UBadgeExample.vue
@@ -0,0 +1,11 @@
+<script setup lang="ts">
+extendCompodiumMeta({
+  defaultProps: {
+    label: 'Badge'
+  }
+})
+</script>
+
+<template>
+  <UBadge />
+</template>
diff --git a/playground/compodium/examples/UBadge/UBadgeExampleAvatar.vue b/playground/compodium/examples/UBadge/UBadgeExampleAvatar.vue
new file mode 100644
index 00000000..490f9259
--- /dev/null
+++ 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>
diff --git a/playground/compodium/examples/UBadge/UBadgeExampleIcon.vue b/playground/compodium/examples/UBadge/UBadgeExampleIcon.vue
new file mode 100644
index 00000000..7979c412
--- /dev/null
+++ 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>
diff --git a/playground/compodium/examples/UBadge/UBadgeExampleSizes.vue b/playground/compodium/examples/UBadge/UBadgeExampleSizes.vue
new file mode 100644
index 00000000..ce2f0ac6
--- /dev/null
+++ 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>
diff --git a/playground/compodium/examples/UButtonExampleDisabled.vue b/playground/compodium/examples/UBadge/UBadgeExampleVariants.vue
similarity index 70%
rename from playground/compodium/examples/UButtonExampleDisabled.vue
rename to playground/compodium/examples/UBadge/UBadgeExampleVariants.vue
index c40af9d5..0cc9472a 100644
--- a/playground/compodium/examples/UButtonExampleDisabled.vue
+++ b/playground/compodium/examples/UBadge/UBadgeExampleVariants.vue
@@ -2,12 +2,11 @@
 extendCompodiumMeta({
   combo: ['variant', 'color'],
   defaultProps: {
-    label: 'Click me!',
-    disabled: true
+    label: 'Badge'
   }
 })
 </script>
 
 <template>
-  <UButton />
+  <UBadge />
 </template>
diff --git a/playground/compodium/examples/UBreadcrumb/UBreadcrumbExample.vue b/playground/compodium/examples/UBreadcrumb/UBreadcrumbExample.vue
new file mode 100644
index 00000000..3fea6c6f
--- /dev/null
+++ 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>
diff --git a/playground/compodium/examples/UButtonExample.vue b/playground/compodium/examples/UButton/UButtonExample.vue
similarity index 100%
rename from playground/compodium/examples/UButtonExample.vue
rename to playground/compodium/examples/UButton/UButtonExample.vue
diff --git a/playground/compodium/examples/UButtonExampleAvatar.vue b/playground/compodium/examples/UButton/UButtonExampleAvatar.vue
similarity index 85%
rename from playground/compodium/examples/UButtonExampleAvatar.vue
rename to playground/compodium/examples/UButton/UButtonExampleAvatar.vue
index cc60af48..55bee38f 100644
--- a/playground/compodium/examples/UButtonExampleAvatar.vue
+++ b/playground/compodium/examples/UButton/UButtonExampleAvatar.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 extendCompodiumMeta({
-  combo: ['variant', 'size'],
+  combo: ['size', 'variant'],
   defaultProps: {
     avatar: { src: 'https://github.com/benjamincanac.png' }
   }
diff --git a/playground/compodium/examples/UButtonExampleIcon.vue b/playground/compodium/examples/UButton/UButtonExampleIcon.vue
similarity index 85%
rename from playground/compodium/examples/UButtonExampleIcon.vue
rename to playground/compodium/examples/UButton/UButtonExampleIcon.vue
index abf83913..e3ff5a61 100644
--- a/playground/compodium/examples/UButtonExampleIcon.vue
+++ b/playground/compodium/examples/UButton/UButtonExampleIcon.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 extendCompodiumMeta({
-  combo: ['variant', 'size'],
+  combo: ['size', 'variant'],
   defaultProps: {
     label: 'Click me!',
     icon: 'i-lucide-rocket'
diff --git a/playground/compodium/examples/UButtonExampleLoading.vue b/playground/compodium/examples/UButton/UButtonExampleLoading.vue
similarity index 84%
rename from playground/compodium/examples/UButtonExampleLoading.vue
rename to playground/compodium/examples/UButton/UButtonExampleLoading.vue
index be7c114c..9a1d8089 100644
--- a/playground/compodium/examples/UButtonExampleLoading.vue
+++ b/playground/compodium/examples/UButton/UButtonExampleLoading.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 extendCompodiumMeta({
-  combo: ['variant', 'size'],
+  combo: ['size', 'variant'],
   defaultProps: {
     label: 'Click me!',
     loading: true
diff --git a/playground/compodium/examples/UButton/UButtonExampleSizes.vue b/playground/compodium/examples/UButton/UButtonExampleSizes.vue
new file mode 100644
index 00000000..7020acbf
--- /dev/null
+++ 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>
diff --git a/playground/compodium/examples/UButtonGroup/UButtonGroupExample.vue b/playground/compodium/examples/UButtonGroup/UButtonGroupExample.vue
new file mode 100644
index 00000000..9c2f8315
--- /dev/null
+++ 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>
diff --git a/playground/compodium/examples/UButtonGroup/UButtonGroupExampleSizes.vue b/playground/compodium/examples/UButtonGroup/UButtonGroupExampleSizes.vue
new file mode 100644
index 00000000..25163ba7
--- /dev/null
+++ 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>
diff --git a/playground/compodium/examples/UCard/UCardExample.vue b/playground/compodium/examples/UCard/UCardExample.vue
new file mode 100644
index 00000000..95bc1ac5
--- /dev/null
+++ 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>
diff --git a/playground/compodium/examples/UCarousel/UCarouselExample.vue b/playground/compodium/examples/UCarousel/UCarouselExample.vue
new file mode 100644
index 00000000..10729092
--- /dev/null
+++ 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>
diff --git a/playground/compodium/examples/UButtonExampleSizes.vue b/playground/compodium/examples/UCheckbox/UCheckboxExample.vue
similarity index 62%
rename from playground/compodium/examples/UButtonExampleSizes.vue
rename to playground/compodium/examples/UCheckbox/UCheckboxExample.vue
index 9c828b6e..5a4a71c6 100644
--- a/playground/compodium/examples/UButtonExampleSizes.vue
+++ b/playground/compodium/examples/UCheckbox/UCheckboxExample.vue
@@ -1,13 +1,13 @@
 <script setup lang="ts">
 extendCompodiumMeta({
-  combo: ['variant', 'size'],
+  combo: ['size', 'color'],
   defaultProps: {
     label: 'Click me!',
-    disabled: true
+    modelValue: true
   }
 })
 </script>
 
 <template>
-  <UButton v-bind="$attrs" />
+  <UCheckbox />
 </template>
diff --git a/playground/compodium/examples/UCheckbox/UCheckboxExampleDescription.vue b/playground/compodium/examples/UCheckbox/UCheckboxExampleDescription.vue
new file mode 100644
index 00000000..fff7cfd5
--- /dev/null
+++ 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>
diff --git a/playground/compodium/examples/UCheckbox/UCheckboxExampleIcon.vue b/playground/compodium/examples/UCheckbox/UCheckboxExampleIcon.vue
new file mode 100644
index 00000000..b99c1f61
--- /dev/null
+++ 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>
diff --git a/playground/compodium/examples/UCheckbox/UCheckboxExampleIndeterminate.vue b/playground/compodium/examples/UCheckbox/UCheckboxExampleIndeterminate.vue
new file mode 100644
index 00000000..54b61ecb
--- /dev/null
+++ 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>
diff --git a/playground/compodium/examples/UChip/UChipExample.vue b/playground/compodium/examples/UChip/UChipExample.vue
new file mode 100644
index 00000000..9ceff6ac
--- /dev/null
+++ b/playground/compodium/examples/UChip/UChipExample.vue
@@ -0,0 +1,5 @@
+<template>
+  <UChip>
+    <UButton icon="i-lucide-inbox" color="neutral" variant="subtle" />
+  </UChip>
+</template>
diff --git a/playground/compodium/examples/UChip/UChipExamplePositions.vue b/playground/compodium/examples/UChip/UChipExamplePositions.vue
new file mode 100644
index 00000000..586bd7f3
--- /dev/null
+++ 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>
diff --git a/playground/compodium/examples/UChip/UChipExampleSizes.vue b/playground/compodium/examples/UChip/UChipExampleSizes.vue
new file mode 100644
index 00000000..120993df
--- /dev/null
+++ 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>
diff --git a/playground/compodium/examples/UCollapsible/UCollapsibleExample.vue b/playground/compodium/examples/UCollapsible/UCollapsibleExample.vue
new file mode 100644
index 00000000..48026e1f
--- /dev/null
+++ 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>
diff --git a/playground/compodium/examples/UCommandPalette/UCommandPaletteExample.vue b/playground/compodium/examples/UCommandPalette/UCommandPaletteExample.vue
new file mode 100644
index 00000000..d699e242
--- /dev/null
+++ 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>
diff --git a/playground/compodium/examples/UCommandPalette/UCommandPaletteExampleDrawer.vue b/playground/compodium/examples/UCommandPalette/UCommandPaletteExampleDrawer.vue
new file mode 100644
index 00000000..4f42251d
--- /dev/null
+++ 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>
diff --git a/playground/compodium/examples/UCommandPalette/UCommandPaletteExampleModal.vue b/playground/compodium/examples/UCommandPalette/UCommandPaletteExampleModal.vue
new file mode 100644
index 00000000..95394df7
--- /dev/null
+++ 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>
diff --git a/playground/compodium/examples/UCommandPalette/UCommandPaletteExamplePopover.vue b/playground/compodium/examples/UCommandPalette/UCommandPaletteExamplePopover.vue
new file mode 100644
index 00000000..20e8f0ea
--- /dev/null
+++ 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>
diff --git a/playground/compodium/preview.vue b/playground/compodium/preview.vue
new file mode 100644
index 00000000..0c02158e
--- /dev/null
+++ 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>
diff --git a/playground/nuxt.config.ts b/playground/nuxt.config.ts
index 4f3d0a5d..6853b8eb 100644
--- a/playground/nuxt.config.ts
+++ b/playground/nuxt.config.ts
@@ -21,6 +21,7 @@ export default defineNuxtConfig({
 
   compodium: {
     includeLibraryCollections: false,
+    ignore: ['**/App.vue', '**/*Example.vue', '**/Placeholder.vue', '**/*Content.vue'],
     extras: {
       colors: {
         neutral: 'slate'
diff --git a/playground/package.json b/playground/package.json
index 0f24789a..7f6e9d35 100644
--- a/playground/package.json
+++ b/playground/package.json
@@ -8,12 +8,14 @@
     "generate": "nuxi generate"
   },
   "dependencies": {
-    "@compodium/nuxt": "0.1.0-beta.7",
     "@iconify-json/lucide": "^1.2.32",
     "@iconify-json/simple-icons": "^1.2.29",
     "@nuxt/ui": "latest",
     "@nuxthub/core": "^0.8.18",
     "nuxt": "^3.16.1",
     "zod": "^3.24.2"
+  },
+  "devDependencies": {
+    "@compodium/nuxt": "https://pkg.pr.new/romhml/compodium/@compodium/nuxt@185ece2"
   }
 }
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 59440b7b..5376f433 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -304,9 +304,6 @@ importers:
 
   playground:
     dependencies:
-      '@compodium/nuxt':
-        specifier: 0.1.0-beta.7
-        version: 0.1.0-beta.7(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))
       '@iconify-json/lucide':
         specifier: ^1.2.32
         version: 1.2.32
@@ -325,6 +322,10 @@ importers:
       zod:
         specifier: ^3.24.2
         version: 3.24.2
+    devDependencies:
+      '@compodium/nuxt':
+        specifier: https://pkg.pr.new/romhml/compodium/@compodium/nuxt@185ece2
+        version: https://pkg.pr.new/romhml/compodium/@compodium/nuxt@185ece2(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:
@@ -552,8 +553,9 @@ packages:
   '@cloudflare/workers-types@4.20250321.0':
     resolution: {integrity: sha512-jPwtZJC7tVFOwFazuwq96be8haTnY9qik8hJ+oLFi50d9LTWPPrnrNHC4OxZmJTEcPIAy0y1WFZHe8C/b7xFXQ==}
 
-  '@compodium/core@0.1.0-beta.7':
-    resolution: {integrity: sha512-QFR+nlc7x0oP4j10eSOwH8TM1/mEIGseo7qrtPEVq35X0F7bAPXSQAZnyNOEZtcAc9PETkZ+j8l508K90orWdw==}
+  '@compodium/core@https://pkg.pr.new/romhml/compodium/@compodium/core@185ece23f49ec55deb12b041a017f31f7ba25ade':
+    resolution: {tarball: https://pkg.pr.new/romhml/compodium/@compodium/core@185ece23f49ec55deb12b041a017f31f7ba25ade}
+    version: 0.0.0-185ece23f49ec55deb12b041a017f31f7ba25ade
     peerDependencies:
       vite: '>=3.2.11'
       vue: '>=3.5.13'
@@ -561,19 +563,22 @@ packages:
       vite:
         optional: true
 
-  '@compodium/examples@0.1.0-beta.7':
-    resolution: {integrity: sha512-EbyD4fW3ZCel9sYlB/ecZ9tWYyjduBRRNhU4NeL+hgyYi7gInrPMkx8PVyYrp2A6ckjJCmDZtkVCRrBQ/f8u4Q==}
+  '@compodium/examples@https://pkg.pr.new/romhml/compodium/@compodium/examples@185ece23f49ec55deb12b041a017f31f7ba25ade':
+    resolution: {tarball: https://pkg.pr.new/romhml/compodium/@compodium/examples@185ece23f49ec55deb12b041a017f31f7ba25ade}
+    version: 0.0.0-185ece23f49ec55deb12b041a017f31f7ba25ade
 
-  '@compodium/meta@0.1.0-beta.7':
-    resolution: {integrity: sha512-i1xm4wQ1YwPgLiiM22In+y94oxJgd5/CgkXFJK9rnq7jO+uGi7rbbyA/fr+7BXnpIgE9eqPESewI7YYyzuQ1Pw==}
+  '@compodium/meta@https://pkg.pr.new/romhml/compodium/@compodium/meta@185ece23f49ec55deb12b041a017f31f7ba25ade':
+    resolution: {tarball: https://pkg.pr.new/romhml/compodium/@compodium/meta@185ece23f49ec55deb12b041a017f31f7ba25ade}
+    version: 0.0.0-185ece23f49ec55deb12b041a017f31f7ba25ade
     peerDependencies:
       typescript: 5.6.3
     peerDependenciesMeta:
       typescript:
         optional: true
 
-  '@compodium/nuxt@0.1.0-beta.7':
-    resolution: {integrity: sha512-TVACdtzWRwfXJzG+T8+Fal8ecdeo0AIc9jcslslMSjKDqTRK6mgCMnfDr8dM5IX1VD2U46euKR/ZpnTqg2/a2w==}
+  '@compodium/nuxt@https://pkg.pr.new/romhml/compodium/@compodium/nuxt@185ece2':
+    resolution: {tarball: https://pkg.pr.new/romhml/compodium/@compodium/nuxt@185ece2}
+    version: 0.0.0-185ece23f49ec55deb12b041a017f31f7ba25ade
 
   '@conventional-changelog/git-client@1.0.1':
     resolution: {integrity: sha512-PJEqBwAleffCMETaVm/fUgHldzBE35JFk3/9LL6NUA5EXa3qednu+UT6M7E5iBu3zIQZCULYIiZ90fBYHt6xUw==}
@@ -7548,10 +7553,10 @@ snapshots:
 
   '@cloudflare/workers-types@4.20250321.0': {}
 
-  '@compodium/core@0.1.0-beta.7(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/core@https://pkg.pr.new/romhml/compodium/@compodium/core@185ece23f49ec55deb12b041a017f31f7ba25ade(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.7
-      '@compodium/meta': 0.1.0-beta.7(typescript@5.6.3)
+      '@compodium/examples': https://pkg.pr.new/romhml/compodium/@compodium/examples@185ece23f49ec55deb12b041a017f31f7ba25ade
+      '@compodium/meta': https://pkg.pr.new/romhml/compodium/@compodium/meta@185ece23f49ec55deb12b041a017f31f7ba25ade(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
@@ -7569,12 +7574,12 @@ snapshots:
     transitivePeerDependencies:
       - typescript
 
-  '@compodium/examples@0.1.0-beta.7':
+  '@compodium/examples@https://pkg.pr.new/romhml/compodium/@compodium/examples@185ece23f49ec55deb12b041a017f31f7ba25ade':
     dependencies:
       pathe: 2.0.3
       scule: 1.3.0
 
-  '@compodium/meta@0.1.0-beta.7(typescript@5.6.3)':
+  '@compodium/meta@https://pkg.pr.new/romhml/compodium/@compodium/meta@185ece23f49ec55deb12b041a017f31f7ba25ade(typescript@5.6.3)':
     dependencies:
       '@volar/typescript': 2.4.12
       '@vue/language-core': 2.2.8(typescript@5.6.3)
@@ -7584,12 +7589,13 @@ snapshots:
     optionalDependencies:
       typescript: 5.6.3
 
-  '@compodium/nuxt@0.1.0-beta.7(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))':
+  '@compodium/nuxt@https://pkg.pr.new/romhml/compodium/@compodium/nuxt@185ece2(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.7(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/core': https://pkg.pr.new/romhml/compodium/@compodium/core@185ece23f49ec55deb12b041a017f31f7ba25ade(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.1(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