diff --git a/docs/pages/components/[component].vue b/docs/pages/components/[component].vue
index 2059d297..17b24fc0 100644
--- a/docs/pages/components/[component].vue
+++ b/docs/pages/components/[component].vue
@@ -104,14 +104,15 @@ const is = `U${params.component}`
 const component = nuxtApp.vueApp.component(is)
 
 const people = [
-  { id: 1, name: 'Durward Reynolds', disabled: false },
-  { id: 2, name: 'Kenton Towne', disabled: false },
-  { id: 3, name: 'Therese Wunsch', disabled: false },
-  { id: 4, name: 'Benedict Kessler', disabled: true },
-  { id: 5, name: 'Katelyn Rohan', disabled: false }
+  { id: 1, label: 'Durward Reynolds', disabled: false },
+  { id: 2, label: 'Kenton Towne', disabled: false },
+  { id: 3, label: 'Therese Wunsch', disabled: false },
+  { id: 4, label: 'Benedict Kessler', disabled: true },
+  { id: 5, label: 'Katelyn Rohan', disabled: false }
 ]
 
 const selectCustom = ref(people[0])
+const commandPalette = ref(people[0])
 const alertDialog = ref(false)
 const toggle = ref(false)
 const modal = ref(false)
@@ -194,16 +195,12 @@ const defaultProps = {
     ]
   },
   CommandPalette: {
+    modelValue: commandPalette,
+    'onUpdate:modelValue': (v) => { commandPalette.value = v },
     groups: [{
       key: 'people',
       label: 'People',
-      commands: [
-        { id: 1, label: 'Durward Reynolds', disabled: false },
-        { id: 2, label: 'Kenton Towne', disabled: false },
-        { id: 3, label: 'Therese Wunsch', disabled: false },
-        { id: 4, label: 'Benedict Kessler', disabled: true },
-        { id: 5, label: 'Katelyn Rohan', disabled: false }
-      ]
+      commands: people
     }]
   },
   Icon: {
@@ -245,7 +242,7 @@ const defaultProps = {
   SelectCustom: {
     modelValue: selectCustom,
     'onUpdate:modelValue': (v) => { selectCustom.value = v },
-    textAttribute: 'name',
+    textAttribute: 'label',
     options: people
   },
   Textarea: {
diff --git a/docs/pages/examples.vue b/docs/pages/examples.vue
index 44de5354..5555eca1 100644
--- a/docs/pages/examples.vue
+++ b/docs/pages/examples.vue
@@ -170,6 +170,16 @@
       <UButton icon="heroicons-outline:bell" variant="red" label="Trigger an error" @click="onNotificationClick" />
     </div>
 
+    <div>
+      <div class="font-medium text-sm mb-1 u-text-gray-700">
+        Command palette:
+      </div>
+
+      <UCard body-class="">
+        <UCommandPalette v-model="form.persons" multiple :groups="[{ key: 'persons', commands: people }]" />
+      </UCard>
+    </div>
+
     <div>
       <div class="font-medium text-sm mb-1 u-text-gray-700">
         Card:
@@ -198,7 +208,7 @@
           </UFormGroup>
 
           <UFormGroup label="People" name="people" required>
-            <USelectCustom v-model="form.person" name="people" :options="people" text-attribute="name" />
+            <USelectCustom v-model="form.person" name="people" :options="people" text-attribute="label" searchable />
           </UFormGroup>
 
           <UFormGroup label="Toggle" name="toggle">
@@ -241,11 +251,11 @@
 const isModalOpen = ref(false)
 
 const people = [
-  { id: 1, name: 'Durward Reynolds', disabled: false },
-  { id: 2, name: 'Kenton Towne', disabled: false },
-  { id: 3, name: 'Therese Wunsch', disabled: false },
-  { id: 4, name: 'Benedict Kessler', disabled: true },
-  { id: 5, name: 'Katelyn Rohan', disabled: false }
+  { id: 1, label: 'Durward Reynolds', disabled: false },
+  { id: 2, label: 'Kenton Towne', disabled: false },
+  { id: 3, label: 'Therese Wunsch', disabled: false },
+  { id: 4, label: 'Benedict Kessler', disabled: true },
+  { id: 5, label: 'Katelyn Rohan', disabled: false }
 ]
 const form = reactive({
   email: '',
@@ -255,7 +265,8 @@ const form = reactive({
   notifications: [],
   terms: false,
   personId: null,
-  person: ref(people[0])
+  person: ref(people[0]),
+  persons: ref([people[0]])
 })
 
 const { $toast } = useNuxtApp()