diff --git a/apps/www/content/3.components/1.chatbot/model-selector.md b/apps/www/content/3.components/1.chatbot/model-selector.md
new file mode 100644
index 0000000..11174c1
--- /dev/null
+++ b/apps/www/content/3.components/1.chatbot/model-selector.md
@@ -0,0 +1,344 @@
+---
+title: Model Selector
+description: A searchable command palette for selecting AI models in your chat interface.
+icon: lucide:square-mouse-pointer
+---
+
+The `Model Selector` component provides a searchable command palette interface for selecting AI models. It's built on top of the cmdk library and provides a keyboard-navigable interface with search functionality.
+
+:::ComponentLoader{label="Preview" componentName="ModelSelector"}
+:::
+
+## Install using CLI
+
+::tabs{variant="card"}
+  ::div{label="ai-elements-vue"}
+  ```sh
+  npx ai-elements-vue@latest add model-selector
+  ```
+  ::
+  ::div{label="shadcn-vue"}
+
+  ```sh
+  npx shadcn-vue@latest add https://registry.ai-elements-vue.com/model-selector.json
+  ```
+  ::
+::
+
+## Install Manually
+
+Copy and paste the following code in the same folder.
+
+:::code-group
+```vue [ModelSelector.vue] height=260 collapse
+<script setup lang="ts">
+import { Dialog } from '@repo/shadcn-vue/components/ui/dialog'
+</script>
+
+<template>
+  <Dialog v-bind="$attrs">
+    <slot />
+  </Dialog>
+</template>
+```
+
+```vue [ModelSelectorTrigger.vue] height=260 collapse
+<script setup lang="ts">
+import { DialogTrigger } from '@repo/shadcn-vue/components/ui/dialog'
+</script>
+
+<template>
+  <DialogTrigger v-bind="$attrs">
+    <slot />
+  </DialogTrigger>
+</template>
+```
+
+```vue [ModelSelectorContent.vue] height=260 collapse
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
+import { Command } from '@repo/shadcn-vue/components/ui/command'
+import { DialogContent, DialogTitle } from '@repo/shadcn-vue/components/ui/dialog'
+import { cn } from '@repo/shadcn-vue/lib/utils'
+
+interface Props {
+  title?: string
+  class?: HTMLAttributes['class']
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  title: 'Model Selector',
+})
+</script>
+
+<template>
+  <DialogContent
+    :class="cn('p-0', props.class)"
+    v-bind="$attrs"
+  >
+    <DialogTitle class="sr-only">
+      {{ title }}
+    </DialogTitle>
+    <Command class="**:data-[slot=command-input-wrapper]:h-auto">
+      <slot />
+    </Command>
+  </DialogContent>
+</template>
+```
+
+```vue [ModelSelectorDialog.vue] height=260 collapse
+<script setup lang="ts">
+import { CommandDialog } from '@repo/shadcn-vue/components/ui/command'
+</script>
+
+<template>
+  <CommandDialog v-bind="$attrs">
+    <slot />
+  </CommandDialog>
+</template>
+```
+
+```vue [ModelSelectorInput.vue] height=260 collapse
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
+import { CommandInput } from '@repo/shadcn-vue/components/ui/command'
+import { cn } from '@repo/shadcn-vue/lib/utils'
+
+interface Props {
+  class?: HTMLAttributes['class']
+}
+
+const props = defineProps<Props>()
+</script>
+
+<template>
+  <CommandInput
+    :class="cn('h-auto py-3.5', props.class)"
+    v-bind="$attrs"
+  />
+</template>
+```
+
+```vue [ModelSelectorList.vue] height=260 collapse
+<script setup lang="ts">
+import { CommandList } from '@repo/shadcn-vue/components/ui/command'
+</script>
+
+<template>
+  <CommandList v-bind="$attrs">
+    <slot />
+  </CommandList>
+</template>
+```
+
+```vue [ModelSelectorEmpty.vue] height=260 collapse
+<script setup lang="ts">
+import { CommandEmpty } from '@repo/shadcn-vue/components/ui/command'
+</script>
+
+<template>
+  <CommandEmpty v-bind="$attrs">
+    <slot />
+  </CommandEmpty>
+</template>
+```
+
+```vue [ModelSelectorGroup.vue] height=260 collapse
+<script setup lang="ts">
+import { CommandGroup } from '@repo/shadcn-vue/components/ui/command'
+</script>
+
+<template>
+  <CommandGroup v-bind="$attrs">
+    <slot />
+  </CommandGroup>
+</template>
+```
+
+```vue [ModelSelectorItem.vue] height=260 collapse
+<script setup lang="ts">
+import { CommandItem } from '@repo/shadcn-vue/components/ui/command'
+</script>
+
+<template>
+  <CommandItem v-bind="$attrs">
+    <slot />
+  </CommandItem>
+</template>
+```
+
+```vue [ModelSelectorShortcut.vue] height=260 collapse
+<script setup lang="ts">
+import { CommandShortcut } from '@repo/shadcn-vue/components/ui/command'
+</script>
+
+<template>
+  <CommandShortcut v-bind="$attrs">
+    <slot />
+  </CommandShortcut>
+</template>
+```
+
+```vue [ModelSelectorSeparator.vue] height=260 collapse
+<script setup lang="ts">
+import { CommandSeparator } from '@repo/shadcn-vue/components/ui/command'
+</script>
+
+<template>
+  <CommandSeparator v-bind="$attrs" />
+</template>
+```
+
+```vue [ModelSelectorLogo.vue] height=260 collapse
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
+import { cn } from '@repo/shadcn-vue/lib/utils'
+
+interface Props {
+  provider: string
+  class?: HTMLAttributes['class']
+}
+
+const props = defineProps<Props>()
+</script>
+
+<template>
+  <img
+    v-bind="$attrs"
+    :alt="`${props.provider} logo`"
+    :class="cn('size-3', props.class)"
+    height="12"
+    :src="`https://models.dev/logos/${props.provider}.svg`"
+    width="12"
+  >
+</template>
+```
+
+```vue [ModelSelectorLogoGroup.vue] height=260 collapse
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
+import { cn } from '@repo/shadcn-vue/lib/utils'
+
+interface Props {
+  class?: HTMLAttributes['class']
+}
+
+const props = defineProps<Props>()
+</script>
+
+<template>
+  <div
+    :class="
+      cn(
+        '-space-x-1 flex shrink-0 items-center [&>img]:rounded-full [&>img]:bg-background [&>img]:p-px [&>img]:ring-1 [&>img]:ring-border',
+        props.class,
+      )
+    "
+    v-bind="$attrs"
+  >
+    <slot />
+  </div>
+</template>
+```
+
+```vue [ModelSelectorName.vue] height=260 collapse
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
+import { cn } from '@repo/shadcn-vue/lib/utils'
+
+interface Props {
+  class?: HTMLAttributes['class']
+}
+
+const props = defineProps<Props>()
+</script>
+
+<template>
+  <span
+    :class="cn('flex-1 truncate text-left', props.class)"
+    v-bind="$attrs"
+  >
+    <slot />
+  </span>
+</template>
+```
+
+```ts [index.ts] height=260 collapse
+export { default as ModelSelector } from './ModelSelector.vue'
+export { default as ModelSelectorContent } from './ModelSelectorContent.vue'
+export { default as ModelSelectorDialog } from './ModelSelectorDialog.vue'
+export { default as ModelSelectorEmpty } from './ModelSelectorEmpty.vue'
+export { default as ModelSelectorGroup } from './ModelSelectorGroup.vue'
+export { default as ModelSelectorInput } from './ModelSelectorInput.vue'
+export { default as ModelSelectorItem } from './ModelSelectorItem.vue'
+export { default as ModelSelectorList } from './ModelSelectorList.vue'
+export { default as ModelSelectorLogo } from './ModelSelectorLogo.vue'
+export { default as ModelSelectorLogoGroup } from './ModelSelectorLogoGroup.vue'
+export { default as ModelSelectorName } from './ModelSelectorName.vue'
+export { default as ModelSelectorSeparator } from './ModelSelectorSeparator.vue'
+export { default as ModelSelectorShortcut } from './ModelSelectorShortcut.vue'
+export { default as ModelSelectorTrigger } from './ModelSelectorTrigger.vue'
+```
+:::
+
+## Features
+
+- Searchable interface with keyboard navigation
+- Fuzzy search filtering across model names
+- Grouped model organization by provider
+- Keyboard shortcuts support
+- Empty state handling
+- Customizable styling with Tailwind CSS
+- Built on cmdk for excellent accessibility
+- Support for both inline and dialog modes
+- TypeScript support with proper type definitions
+
+## Props
+
+### `<ModelSelectorContent />`
+
+:::field-group
+  ::field{name="title" type="string" defaultValue="'Model Selector'"}
+  Title of the model selector.
+  ::
+
+  ::field{name="class" type="string"}
+  Additional classes applied to the component.
+  ::
+:::
+
+### `<ModelSelectorInput />`
+
+:::field-group
+  ::field{name="class" type="string"}
+  Additional classes applied to the component.
+  ::
+:::
+
+### `<ModelSelectorLogo />`
+
+:::field-group
+  ::field{name="provider" type="string"}
+  The AI provider name. Supports major providers like "openai", "anthropic", "google", "mistral", etc.
+  ::
+
+  ::field{name="class" type="string"}
+  Additional classes applied to the component.
+  ::
+:::
+
+### `<ModelSelectorLogoGroup />`
+
+:::field-group
+  ::field{name="class" type="string"}
+  Additional classes applied to the component.
+  ::
+:::
+
+### `<ModelSelectorName />`
+
+:::field-group
+  ::field{name="class" type="string"}
+  Additional classes applied to the component.
+  ::
+:::
diff --git a/apps/www/plugins/ai-elements.ts b/apps/www/plugins/ai-elements.ts
index 85a6203..ecc51da 100644
--- a/apps/www/plugins/ai-elements.ts
+++ b/apps/www/plugins/ai-elements.ts
@@ -20,6 +20,7 @@ import {
   LoaderSizes,
   Message,
   MessageMarkdown,
+  ModelSelector,
   OpenInChat,
   Plan,
   PromptInput,
@@ -79,6 +80,7 @@ export default defineNuxtPlugin((nuxtApp) => {
   vueApp.component('CodeBlockDark', CodeBlockDark)
   vueApp.component('Checkpoint', Checkpoint)
   vueApp.component('Workflow', Workflow)
+  vueApp.component('ModelSelector', ModelSelector)
   vueApp.component('Context', Context)
   vueApp.component('Confirmation', Confirmation)
   vueApp.component('ConfirmationAccepted', ConfirmationAccepted)
diff --git a/packages/elements/src/index.ts b/packages/elements/src/index.ts
index 7634bc1..a570bc5 100644
--- a/packages/elements/src/index.ts
+++ b/packages/elements/src/index.ts
@@ -11,6 +11,7 @@ export * from './image'
 export * from './inline-citation'
 export * from './loader'
 export * from './message'
+export * from './model-selector'
 export * from './open-in-chat'
 export * from './plan'
 export * from './prompt-input'
diff --git a/packages/elements/src/model-selector/ModelSelector.vue b/packages/elements/src/model-selector/ModelSelector.vue
new file mode 100644
index 0000000..772b021
--- /dev/null
+++ b/packages/elements/src/model-selector/ModelSelector.vue
@@ -0,0 +1,9 @@
+<script setup lang="ts">
+import { Dialog } from '@repo/shadcn-vue/components/ui/dialog'
+</script>
+
+<template>
+  <Dialog v-bind="$attrs">
+    <slot />
+  </Dialog>
+</template>
diff --git a/packages/elements/src/model-selector/ModelSelectorContent.vue b/packages/elements/src/model-selector/ModelSelectorContent.vue
new file mode 100644
index 0000000..62dd3e1
--- /dev/null
+++ b/packages/elements/src/model-selector/ModelSelectorContent.vue
@@ -0,0 +1,29 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
+import { Command } from '@repo/shadcn-vue/components/ui/command'
+import { DialogContent, DialogTitle } from '@repo/shadcn-vue/components/ui/dialog'
+import { cn } from '@repo/shadcn-vue/lib/utils'
+
+interface Props {
+  title?: string
+  class?: HTMLAttributes['class']
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  title: 'Model Selector',
+})
+</script>
+
+<template>
+  <DialogContent
+    :class="cn('p-0', props.class)"
+    v-bind="$attrs"
+  >
+    <DialogTitle class="sr-only">
+      {{ props.title }}
+    </DialogTitle>
+    <Command class="**:data-[slot=command-input-wrapper]:h-auto">
+      <slot />
+    </Command>
+  </DialogContent>
+</template>
diff --git a/packages/elements/src/model-selector/ModelSelectorDialog.vue b/packages/elements/src/model-selector/ModelSelectorDialog.vue
new file mode 100644
index 0000000..bb18879
--- /dev/null
+++ b/packages/elements/src/model-selector/ModelSelectorDialog.vue
@@ -0,0 +1,9 @@
+<script setup lang="ts">
+import { CommandDialog } from '@repo/shadcn-vue/components/ui/command'
+</script>
+
+<template>
+  <CommandDialog v-bind="$attrs">
+    <slot />
+  </CommandDialog>
+</template>
diff --git a/packages/elements/src/model-selector/ModelSelectorEmpty.vue b/packages/elements/src/model-selector/ModelSelectorEmpty.vue
new file mode 100644
index 0000000..abcdd7d
--- /dev/null
+++ b/packages/elements/src/model-selector/ModelSelectorEmpty.vue
@@ -0,0 +1,9 @@
+<script setup lang="ts">
+import { CommandEmpty } from '@repo/shadcn-vue/components/ui/command'
+</script>
+
+<template>
+  <CommandEmpty v-bind="$attrs">
+    <slot />
+  </CommandEmpty>
+</template>
diff --git a/packages/elements/src/model-selector/ModelSelectorGroup.vue b/packages/elements/src/model-selector/ModelSelectorGroup.vue
new file mode 100644
index 0000000..e894040
--- /dev/null
+++ b/packages/elements/src/model-selector/ModelSelectorGroup.vue
@@ -0,0 +1,9 @@
+<script setup lang="ts">
+import { CommandGroup } from '@repo/shadcn-vue/components/ui/command'
+</script>
+
+<template>
+  <CommandGroup v-bind="$attrs">
+    <slot />
+  </CommandGroup>
+</template>
diff --git a/packages/elements/src/model-selector/ModelSelectorInput.vue b/packages/elements/src/model-selector/ModelSelectorInput.vue
new file mode 100644
index 0000000..352ff7f
--- /dev/null
+++ b/packages/elements/src/model-selector/ModelSelectorInput.vue
@@ -0,0 +1,18 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
+import { CommandInput } from '@repo/shadcn-vue/components/ui/command'
+import { cn } from '@repo/shadcn-vue/lib/utils'
+
+interface Props {
+  class?: HTMLAttributes['class']
+}
+
+const props = defineProps<Props>()
+</script>
+
+<template>
+  <CommandInput
+    :class="cn('h-auto py-3.5', props.class)"
+    v-bind="$attrs"
+  />
+</template>
diff --git a/packages/elements/src/model-selector/ModelSelectorItem.vue b/packages/elements/src/model-selector/ModelSelectorItem.vue
new file mode 100644
index 0000000..0df3de2
--- /dev/null
+++ b/packages/elements/src/model-selector/ModelSelectorItem.vue
@@ -0,0 +1,9 @@
+<script setup lang="ts">
+import { CommandItem } from '@repo/shadcn-vue/components/ui/command'
+</script>
+
+<template>
+  <CommandItem v-bind="$attrs">
+    <slot />
+  </CommandItem>
+</template>
diff --git a/packages/elements/src/model-selector/ModelSelectorList.vue b/packages/elements/src/model-selector/ModelSelectorList.vue
new file mode 100644
index 0000000..9f61b70
--- /dev/null
+++ b/packages/elements/src/model-selector/ModelSelectorList.vue
@@ -0,0 +1,9 @@
+<script setup lang="ts">
+import { CommandList } from '@repo/shadcn-vue/components/ui/command'
+</script>
+
+<template>
+  <CommandList v-bind="$attrs">
+    <slot />
+  </CommandList>
+</template>
diff --git a/packages/elements/src/model-selector/ModelSelectorLogo.vue b/packages/elements/src/model-selector/ModelSelectorLogo.vue
new file mode 100644
index 0000000..c074f3d
--- /dev/null
+++ b/packages/elements/src/model-selector/ModelSelectorLogo.vue
@@ -0,0 +1,22 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
+import { cn } from '@repo/shadcn-vue/lib/utils'
+
+interface Props {
+  provider: string
+  class?: HTMLAttributes['class']
+}
+
+const props = defineProps<Props>()
+</script>
+
+<template>
+  <img
+    v-bind="$attrs"
+    :alt="`${props.provider} logo`"
+    :class="cn('size-3', props.class)"
+    height="12"
+    :src="`https://models.dev/logos/${props.provider}.svg`"
+    width="12"
+  >
+</template>
diff --git a/packages/elements/src/model-selector/ModelSelectorLogoGroup.vue b/packages/elements/src/model-selector/ModelSelectorLogoGroup.vue
new file mode 100644
index 0000000..3f14262
--- /dev/null
+++ b/packages/elements/src/model-selector/ModelSelectorLogoGroup.vue
@@ -0,0 +1,24 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
+import { cn } from '@repo/shadcn-vue/lib/utils'
+
+interface Props {
+  class?: HTMLAttributes['class']
+}
+
+const props = defineProps<Props>()
+</script>
+
+<template>
+  <div
+    :class="
+      cn(
+        '-space-x-1 flex shrink-0 items-center [&>img]:rounded-full [&>img]:bg-background [&>img]:p-px [&>img]:ring-1 [&>img]:ring-border',
+        props.class,
+      )
+    "
+    v-bind="$attrs"
+  >
+    <slot />
+  </div>
+</template>
diff --git a/packages/elements/src/model-selector/ModelSelectorName.vue b/packages/elements/src/model-selector/ModelSelectorName.vue
new file mode 100644
index 0000000..e94cd25
--- /dev/null
+++ b/packages/elements/src/model-selector/ModelSelectorName.vue
@@ -0,0 +1,19 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
+import { cn } from '@repo/shadcn-vue/lib/utils'
+
+interface Props {
+  class?: HTMLAttributes['class']
+}
+
+const props = defineProps<Props>()
+</script>
+
+<template>
+  <span
+    :class="cn('flex-1 truncate text-left', props.class)"
+    v-bind="$attrs"
+  >
+    <slot />
+  </span>
+</template>
diff --git a/packages/elements/src/model-selector/ModelSelectorSeparator.vue b/packages/elements/src/model-selector/ModelSelectorSeparator.vue
new file mode 100644
index 0000000..e916066
--- /dev/null
+++ b/packages/elements/src/model-selector/ModelSelectorSeparator.vue
@@ -0,0 +1,7 @@
+<script setup lang="ts">
+import { CommandSeparator } from '@repo/shadcn-vue/components/ui/command'
+</script>
+
+<template>
+  <CommandSeparator v-bind="$attrs" />
+</template>
diff --git a/packages/elements/src/model-selector/ModelSelectorShortcut.vue b/packages/elements/src/model-selector/ModelSelectorShortcut.vue
new file mode 100644
index 0000000..5539093
--- /dev/null
+++ b/packages/elements/src/model-selector/ModelSelectorShortcut.vue
@@ -0,0 +1,9 @@
+<script setup lang="ts">
+import { CommandShortcut } from '@repo/shadcn-vue/components/ui/command'
+</script>
+
+<template>
+  <CommandShortcut v-bind="$attrs">
+    <slot />
+  </CommandShortcut>
+</template>
diff --git a/packages/elements/src/model-selector/ModelSelectorTrigger.vue b/packages/elements/src/model-selector/ModelSelectorTrigger.vue
new file mode 100644
index 0000000..b2de0a2
--- /dev/null
+++ b/packages/elements/src/model-selector/ModelSelectorTrigger.vue
@@ -0,0 +1,9 @@
+<script setup lang="ts">
+import { DialogTrigger } from '@repo/shadcn-vue/components/ui/dialog'
+</script>
+
+<template>
+  <DialogTrigger v-bind="$attrs">
+    <slot />
+  </DialogTrigger>
+</template>
diff --git a/packages/elements/src/model-selector/index.ts b/packages/elements/src/model-selector/index.ts
new file mode 100644
index 0000000..35233e4
--- /dev/null
+++ b/packages/elements/src/model-selector/index.ts
@@ -0,0 +1,14 @@
+export { default as ModelSelector } from './ModelSelector.vue'
+export { default as ModelSelectorContent } from './ModelSelectorContent.vue'
+export { default as ModelSelectorDialog } from './ModelSelectorDialog.vue'
+export { default as ModelSelectorEmpty } from './ModelSelectorEmpty.vue'
+export { default as ModelSelectorGroup } from './ModelSelectorGroup.vue'
+export { default as ModelSelectorInput } from './ModelSelectorInput.vue'
+export { default as ModelSelectorItem } from './ModelSelectorItem.vue'
+export { default as ModelSelectorList } from './ModelSelectorList.vue'
+export { default as ModelSelectorLogo } from './ModelSelectorLogo.vue'
+export { default as ModelSelectorLogoGroup } from './ModelSelectorLogoGroup.vue'
+export { default as ModelSelectorName } from './ModelSelectorName.vue'
+export { default as ModelSelectorSeparator } from './ModelSelectorSeparator.vue'
+export { default as ModelSelectorShortcut } from './ModelSelectorShortcut.vue'
+export { default as ModelSelectorTrigger } from './ModelSelectorTrigger.vue'
diff --git a/packages/examples/src/index.ts b/packages/examples/src/index.ts
index e7c0beb..56e8c68 100644
--- a/packages/examples/src/index.ts
+++ b/packages/examples/src/index.ts
@@ -19,6 +19,7 @@ export { default as LoaderSizes } from './loader-sizes.vue'
 export { default as Loader } from './loader.vue'
 export { default as MessageMarkdown } from './message-markdown.vue'
 export { default as Message } from './message.vue'
+export { default as ModelSelector } from './model-selector.vue'
 export { default as OpenInChat } from './open-in-chat.vue'
 export { default as Plan } from './plan.vue'
 export { default as PromptInput } from './prompt-input.vue'
diff --git a/packages/examples/src/model-selector.vue b/packages/examples/src/model-selector.vue
new file mode 100644
index 0000000..004a5c9
--- /dev/null
+++ b/packages/examples/src/model-selector.vue
@@ -0,0 +1,345 @@
+<script setup lang="ts">
+import {
+  ModelSelector,
+  ModelSelectorContent,
+  ModelSelectorEmpty,
+  ModelSelectorGroup,
+  ModelSelectorInput,
+  ModelSelectorItem,
+  ModelSelectorList,
+  ModelSelectorLogo,
+  ModelSelectorLogoGroup,
+  ModelSelectorName,
+  ModelSelectorTrigger,
+} from '@repo/elements/model-selector'
+import { Button } from '@repo/shadcn-vue/components/ui/button'
+import { Check } from 'lucide-vue-next'
+import { computed, ref } from 'vue'
+
+interface Model {
+  id: string
+  name: string
+  chef: string
+  chefSlug: string
+  providers: string[]
+}
+
+const models: Model[] = [
+  {
+    id: 'gpt-4o',
+    name: 'GPT-4o',
+    chef: 'OpenAI',
+    chefSlug: 'openai',
+    providers: ['openai', 'azure'],
+  },
+  {
+    id: 'gpt-4o-mini',
+    name: 'GPT-4o Mini',
+    chef: 'OpenAI',
+    chefSlug: 'openai',
+    providers: ['openai', 'azure'],
+  },
+  {
+    id: 'o1',
+    name: 'o1',
+    chef: 'OpenAI',
+    chefSlug: 'openai',
+    providers: ['openai', 'azure'],
+  },
+  {
+    id: 'o1-mini',
+    name: 'o1 Mini',
+    chef: 'OpenAI',
+    chefSlug: 'openai',
+    providers: ['openai', 'azure'],
+  },
+  {
+    id: 'claude-opus-4-20250514',
+    name: 'Claude 4 Opus',
+    chef: 'Anthropic',
+    chefSlug: 'anthropic',
+    providers: ['anthropic', 'azure', 'google-vertex', 'amazon-bedrock'],
+  },
+  {
+    id: 'claude-sonnet-4-20250514',
+    name: 'Claude 4 Sonnet',
+    chef: 'Anthropic',
+    chefSlug: 'anthropic',
+    providers: ['anthropic', 'azure', 'google-vertex', 'amazon-bedrock'],
+  },
+  {
+    id: 'claude-3.5-sonnet',
+    name: 'Claude 3.5 Sonnet',
+    chef: 'Anthropic',
+    chefSlug: 'anthropic',
+    providers: ['anthropic', 'azure', 'google-vertex', 'amazon-bedrock'],
+  },
+  {
+    id: 'claude-3.5-haiku',
+    name: 'Claude 3.5 Haiku',
+    chef: 'Anthropic',
+    chefSlug: 'anthropic',
+    providers: ['anthropic', 'azure', 'google-vertex', 'amazon-bedrock'],
+  },
+  {
+    id: 'gemini-2.0-flash-exp',
+    name: 'Gemini 2.0 Flash',
+    chef: 'Google',
+    chefSlug: 'google',
+    providers: ['google', 'google-vertex'],
+  },
+  {
+    id: 'gemini-1.5-pro',
+    name: 'Gemini 1.5 Pro',
+    chef: 'Google',
+    chefSlug: 'google',
+    providers: ['google', 'google-vertex'],
+  },
+  {
+    id: 'gemini-1.5-flash',
+    name: 'Gemini 1.5 Flash',
+    chef: 'Google',
+    chefSlug: 'google',
+    providers: ['google', 'google-vertex'],
+  },
+  {
+    id: 'llama-3.3-70b',
+    name: 'Llama 3.3 70B',
+    chef: 'Meta',
+    chefSlug: 'llama',
+    providers: ['groq', 'togetherai', 'amazon-bedrock'],
+  },
+  {
+    id: 'llama-3.1-405b',
+    name: 'Llama 3.1 405B',
+    chef: 'Meta',
+    chefSlug: 'llama',
+    providers: ['togetherai', 'amazon-bedrock'],
+  },
+  {
+    id: 'llama-3.1-70b',
+    name: 'Llama 3.1 70B',
+    chef: 'Meta',
+    chefSlug: 'llama',
+    providers: ['groq', 'togetherai', 'amazon-bedrock'],
+  },
+  {
+    id: 'llama-3.1-8b',
+    name: 'Llama 3.1 8B',
+    chef: 'Meta',
+    chefSlug: 'llama',
+    providers: ['groq', 'togetherai'],
+  },
+  {
+    id: 'deepseek-r1',
+    name: 'DeepSeek R1',
+    chef: 'DeepSeek',
+    chefSlug: 'deepseek',
+    providers: ['deepseek', 'openrouter'],
+  },
+  {
+    id: 'deepseek-v3',
+    name: 'DeepSeek V3',
+    chef: 'DeepSeek',
+    chefSlug: 'deepseek',
+    providers: ['deepseek', 'openrouter'],
+  },
+  {
+    id: 'deepseek-coder-v2',
+    name: 'DeepSeek Coder V2',
+    chef: 'DeepSeek',
+    chefSlug: 'deepseek',
+    providers: ['deepseek', 'openrouter'],
+  },
+  {
+    id: 'mistral-large',
+    name: 'Mistral Large',
+    chef: 'Mistral AI',
+    chefSlug: 'mistral',
+    providers: ['mistral', 'azure'],
+  },
+  {
+    id: 'mistral-small',
+    name: 'Mistral Small',
+    chef: 'Mistral AI',
+    chefSlug: 'mistral',
+    providers: ['mistral', 'azure'],
+  },
+  {
+    id: 'codestral',
+    name: 'Codestral',
+    chef: 'Mistral AI',
+    chefSlug: 'mistral',
+    providers: ['mistral'],
+  },
+  {
+    id: 'qwen-2.5-72b',
+    name: 'Qwen 2.5 72B',
+    chef: 'Alibaba',
+    chefSlug: 'alibaba',
+    providers: ['alibaba', 'openrouter'],
+  },
+  {
+    id: 'qwen-2.5-coder-32b',
+    name: 'Qwen 2.5 Coder 32B',
+    chef: 'Alibaba',
+    chefSlug: 'alibaba',
+    providers: ['alibaba', 'openrouter'],
+  },
+  {
+    id: 'qwen-max',
+    name: 'Qwen Max',
+    chef: 'Alibaba',
+    chefSlug: 'alibaba',
+    providers: ['alibaba'],
+  },
+  {
+    id: 'command-r-plus',
+    name: 'Command R+',
+    chef: 'Cohere',
+    chefSlug: 'cohere',
+    providers: ['cohere', 'azure', 'amazon-bedrock'],
+  },
+  {
+    id: 'command-r',
+    name: 'Command R',
+    chef: 'Cohere',
+    chefSlug: 'cohere',
+    providers: ['cohere', 'azure', 'amazon-bedrock'],
+  },
+  {
+    id: 'grok-3',
+    name: 'Grok 3',
+    chef: 'xAI',
+    chefSlug: 'xai',
+    providers: ['xai'],
+  },
+  {
+    id: 'grok-2-1212',
+    name: 'Grok 2 1212',
+    chef: 'xAI',
+    chefSlug: 'xai',
+    providers: ['xai'],
+  },
+  {
+    id: 'grok-vision',
+    name: 'Grok Vision',
+    chef: 'xAI',
+    chefSlug: 'xai',
+    providers: ['xai'],
+  },
+  {
+    id: 'moonshot-v1-128k',
+    name: 'Moonshot v1 128K',
+    chef: 'Moonshot AI',
+    chefSlug: 'moonshotai',
+    providers: ['moonshotai'],
+  },
+  {
+    id: 'moonshot-v1-32k',
+    name: 'Moonshot v1 32K',
+    chef: 'Moonshot AI',
+    chefSlug: 'moonshotai',
+    providers: ['moonshotai'],
+  },
+  {
+    id: 'sonar-pro',
+    name: 'Sonar Pro',
+    chef: 'Perplexity',
+    chefSlug: 'perplexity',
+    providers: ['perplexity'],
+  },
+  {
+    id: 'sonar',
+    name: 'Sonar',
+    chef: 'Perplexity',
+    chefSlug: 'perplexity',
+    providers: ['perplexity'],
+  },
+  {
+    id: 'v0-chat',
+    name: 'v0 Chat',
+    chef: 'Vercel',
+    chefSlug: 'v0',
+    providers: ['vercel'],
+  },
+  {
+    id: 'nova-pro',
+    name: 'Nova Pro',
+    chef: 'Amazon',
+    chefSlug: 'amazon-bedrock',
+    providers: ['amazon-bedrock'],
+  },
+  {
+    id: 'nova-lite',
+    name: 'Nova Lite',
+    chef: 'Amazon',
+    chefSlug: 'amazon-bedrock',
+    providers: ['amazon-bedrock'],
+  },
+  {
+    id: 'nova-micro',
+    name: 'Nova Micro',
+    chef: 'Amazon',
+    chefSlug: 'amazon-bedrock',
+    providers: ['amazon-bedrock'],
+  },
+]
+
+const open = ref(false)
+const selectedModel = ref<string>('gpt-4o')
+
+const selectedModelData = computed(() => models.find(m => m.id === selectedModel.value))
+const chefs = Array.from(new Set(models.map(model => model.chef)))
+
+function handleSelect(id: string) {
+  selectedModel.value = id
+  open.value = false
+}
+</script>
+
+<template>
+  <div class="flex size-full items-center justify-center p-8">
+    <ModelSelector v-model:open="open">
+      <ModelSelectorTrigger>
+        <Button class="w-[200px] justify-between" variant="outline">
+          <ModelSelectorLogo v-if="selectedModelData?.chefSlug" :provider="selectedModelData.chefSlug" />
+          <ModelSelectorName>{{ selectedModelData?.name }}</ModelSelectorName>
+        </Button>
+      </ModelSelectorTrigger>
+
+      <ModelSelectorContent>
+        <ModelSelectorInput placeholder="Search models..." />
+
+        <ModelSelectorList>
+          <ModelSelectorEmpty>No models found.</ModelSelectorEmpty>
+
+          <ModelSelectorGroup
+            v-for="chef in chefs"
+            :key="chef"
+            :heading="chef"
+          >
+            <ModelSelectorItem
+              v-for="model in models.filter(m => m.chef === chef)"
+              :key="model.id"
+              :value="model.id"
+              @select="handleSelect(model.id)"
+            >
+              <ModelSelectorLogo :provider="model.chefSlug" />
+              <ModelSelectorName>{{ model.name }}</ModelSelectorName>
+              <ModelSelectorLogoGroup>
+                <ModelSelectorLogo
+                  v-for="provider in model.providers"
+                  :key="provider"
+                  :provider="provider"
+                />
+              </ModelSelectorLogoGroup>
+              <Check v-if="selectedModel === model.id" class="ml-auto size-4" />
+              <div v-else class="ml-auto size-4" />
+            </ModelSelectorItem>
+          </ModelSelectorGroup>
+        </ModelSelectorList>
+      </ModelSelectorContent>
+    </ModelSelector>
+  </div>
+</template>
diff --git a/packages/shadcn-vue/components/ui/command/Command.vue b/packages/shadcn-vue/components/ui/command/Command.vue
new file mode 100644
index 0000000..51f1f75
--- /dev/null
+++ b/packages/shadcn-vue/components/ui/command/Command.vue
@@ -0,0 +1,87 @@
+<script setup lang="ts">
+import type { ListboxRootEmits, ListboxRootProps } from 'reka-ui'
+import type { HTMLAttributes } from 'vue'
+import { cn } from '@repo/shadcn-vue/lib/utils'
+import { reactiveOmit } from '@vueuse/core'
+import { ListboxRoot, useFilter, useForwardPropsEmits } from 'reka-ui'
+import { reactive, ref, watch } from 'vue'
+import { provideCommandContext } from '.'
+
+const props = withDefaults(defineProps<ListboxRootProps & { class?: HTMLAttributes['class'] }>(), {
+  modelValue: '',
+})
+
+const emits = defineEmits<ListboxRootEmits>()
+
+const delegatedProps = reactiveOmit(props, 'class')
+
+const forwarded = useForwardPropsEmits(delegatedProps, emits)
+
+const allItems = ref<Map<string, string>>(new Map())
+const allGroups = ref<Map<string, Set<string>>>(new Map())
+
+const { contains } = useFilter({ sensitivity: 'base' })
+const filterState = reactive({
+  search: '',
+  filtered: {
+    /** The count of all visible items. */
+    count: 0,
+    /** Map from visible item id to its search score. */
+    items: new Map() as Map<string, number>,
+    /** Set of groups with at least one visible item. */
+    groups: new Set() as Set<string>,
+  },
+})
+
+function filterItems() {
+  if (!filterState.search) {
+    filterState.filtered.count = allItems.value.size
+    // Do nothing, each item will know to show itself because search is empty
+    return
+  }
+
+  // Reset the groups
+  filterState.filtered.groups = new Set()
+  let itemCount = 0
+
+  // Check which items should be included
+  for (const [id, value] of allItems.value) {
+    const score = contains(value, filterState.search)
+    filterState.filtered.items.set(id, score ? 1 : 0)
+    if (score)
+      itemCount++
+  }
+
+  // Check which groups have at least 1 item shown
+  for (const [groupId, group] of allGroups.value) {
+    for (const itemId of group) {
+      if (filterState.filtered.items.get(itemId)! > 0) {
+        filterState.filtered.groups.add(groupId)
+        break
+      }
+    }
+  }
+
+  filterState.filtered.count = itemCount
+}
+
+watch(() => filterState.search, () => {
+  filterItems()
+})
+
+provideCommandContext({
+  allItems,
+  allGroups,
+  filterState,
+})
+</script>
+
+<template>
+  <ListboxRoot
+    data-slot="command"
+    v-bind="forwarded"
+    :class="cn('bg-popover text-popover-foreground flex h-full w-full flex-col overflow-hidden rounded-md', props.class)"
+  >
+    <slot />
+  </ListboxRoot>
+</template>
diff --git a/packages/shadcn-vue/components/ui/command/CommandDialog.vue b/packages/shadcn-vue/components/ui/command/CommandDialog.vue
new file mode 100644
index 0000000..711b9f9
--- /dev/null
+++ b/packages/shadcn-vue/components/ui/command/CommandDialog.vue
@@ -0,0 +1,31 @@
+<script setup lang="ts">
+import type { DialogRootEmits, DialogRootProps } from 'reka-ui'
+import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle } from '@repo/shadcn-vue/components/ui/dialog'
+import { useForwardPropsEmits } from 'reka-ui'
+import Command from './Command.vue'
+
+const props = withDefaults(defineProps<DialogRootProps & {
+  title?: string
+  description?: string
+}>(), {
+  title: 'Command Palette',
+  description: 'Search for a command to run...',
+})
+const emits = defineEmits<DialogRootEmits>()
+
+const forwarded = useForwardPropsEmits(props, emits)
+</script>
+
+<template>
+  <Dialog v-bind="forwarded">
+    <DialogContent class="overflow-hidden p-0 ">
+      <DialogHeader class="sr-only">
+        <DialogTitle>{{ title }}</DialogTitle>
+        <DialogDescription>{{ description }}</DialogDescription>
+      </DialogHeader>
+      <Command>
+        <slot />
+      </Command>
+    </DialogContent>
+  </Dialog>
+</template>
diff --git a/packages/shadcn-vue/components/ui/command/CommandEmpty.vue b/packages/shadcn-vue/components/ui/command/CommandEmpty.vue
new file mode 100644
index 0000000..a761b7c
--- /dev/null
+++ b/packages/shadcn-vue/components/ui/command/CommandEmpty.vue
@@ -0,0 +1,27 @@
+<script setup lang="ts">
+import type { PrimitiveProps } from 'reka-ui'
+import type { HTMLAttributes } from 'vue'
+import { cn } from '@repo/shadcn-vue/lib/utils'
+import { reactiveOmit } from '@vueuse/core'
+import { Primitive } from 'reka-ui'
+import { computed } from 'vue'
+import { useCommand } from '.'
+
+const props = defineProps<PrimitiveProps & { class?: HTMLAttributes['class'] }>()
+
+const delegatedProps = reactiveOmit(props, 'class')
+
+const { filterState } = useCommand()
+const isRender = computed(() => !!filterState.search && filterState.filtered.count === 0,
+)
+</script>
+
+<template>
+  <Primitive
+    v-if="isRender"
+    data-slot="command-empty"
+    v-bind="delegatedProps" :class="cn('py-6 text-center text-sm', props.class)"
+  >
+    <slot />
+  </Primitive>
+</template>
diff --git a/packages/shadcn-vue/components/ui/command/CommandGroup.vue b/packages/shadcn-vue/components/ui/command/CommandGroup.vue
new file mode 100644
index 0000000..8b4c1f1
--- /dev/null
+++ b/packages/shadcn-vue/components/ui/command/CommandGroup.vue
@@ -0,0 +1,45 @@
+<script setup lang="ts">
+import type { ListboxGroupProps } from 'reka-ui'
+import type { HTMLAttributes } from 'vue'
+import { cn } from '@repo/shadcn-vue/lib/utils'
+import { reactiveOmit } from '@vueuse/core'
+import { ListboxGroup, ListboxGroupLabel, useId } from 'reka-ui'
+import { computed, onMounted, onUnmounted } from 'vue'
+import { provideCommandGroupContext, useCommand } from '.'
+
+const props = defineProps<ListboxGroupProps & {
+  class?: HTMLAttributes['class']
+  heading?: string
+}>()
+
+const delegatedProps = reactiveOmit(props, 'class')
+
+const { allGroups, filterState } = useCommand()
+const id = useId()
+
+const isRender = computed(() => !filterState.search ? true : filterState.filtered.groups.has(id))
+
+provideCommandGroupContext({ id })
+onMounted(() => {
+  if (!allGroups.value.has(id))
+    allGroups.value.set(id, new Set())
+})
+onUnmounted(() => {
+  allGroups.value.delete(id)
+})
+</script>
+
+<template>
+  <ListboxGroup
+    v-bind="delegatedProps"
+    :id="id"
+    data-slot="command-group"
+    :class="cn('text-foreground overflow-hidden p-1', props.class)"
+    :hidden="isRender ? undefined : true"
+  >
+    <ListboxGroupLabel v-if="heading" class="px-2 py-1.5 text-xs font-medium text-muted-foreground">
+      {{ heading }}
+    </ListboxGroupLabel>
+    <slot />
+  </ListboxGroup>
+</template>
diff --git a/packages/shadcn-vue/components/ui/command/CommandInput.vue b/packages/shadcn-vue/components/ui/command/CommandInput.vue
new file mode 100644
index 0000000..95079f7
--- /dev/null
+++ b/packages/shadcn-vue/components/ui/command/CommandInput.vue
@@ -0,0 +1,39 @@
+<script setup lang="ts">
+import type { ListboxFilterProps } from 'reka-ui'
+import type { HTMLAttributes } from 'vue'
+import { cn } from '@repo/shadcn-vue/lib/utils'
+import { reactiveOmit } from '@vueuse/core'
+import { Search } from 'lucide-vue-next'
+import { ListboxFilter, useForwardProps } from 'reka-ui'
+import { useCommand } from '.'
+
+defineOptions({
+  inheritAttrs: false,
+})
+
+const props = defineProps<ListboxFilterProps & {
+  class?: HTMLAttributes['class']
+}>()
+
+const delegatedProps = reactiveOmit(props, 'class')
+
+const forwardedProps = useForwardProps(delegatedProps)
+
+const { filterState } = useCommand()
+</script>
+
+<template>
+  <div
+    data-slot="command-input-wrapper"
+    class="flex h-12 items-center gap-2 border-b px-3"
+  >
+    <Search class="size-4 shrink-0 opacity-50" />
+    <ListboxFilter
+      v-bind="{ ...forwardedProps, ...$attrs }"
+      v-model="filterState.search"
+      data-slot="command-input"
+      auto-focus
+      :class="cn('placeholder:text-muted-foreground flex h-12 w-full rounded-md bg-transparent py-3 text-sm outline-hidden disabled:cursor-not-allowed disabled:opacity-50', props.class)"
+    />
+  </div>
+</template>
diff --git a/packages/shadcn-vue/components/ui/command/CommandItem.vue b/packages/shadcn-vue/components/ui/command/CommandItem.vue
new file mode 100644
index 0000000..c69a54e
--- /dev/null
+++ b/packages/shadcn-vue/components/ui/command/CommandItem.vue
@@ -0,0 +1,76 @@
+<script setup lang="ts">
+import type { ListboxItemEmits, ListboxItemProps } from 'reka-ui'
+import type { HTMLAttributes } from 'vue'
+import { cn } from '@repo/shadcn-vue/lib/utils'
+import { reactiveOmit, useCurrentElement } from '@vueuse/core'
+import { ListboxItem, useForwardPropsEmits, useId } from 'reka-ui'
+import { computed, onMounted, onUnmounted, ref } from 'vue'
+import { useCommand, useCommandGroup } from '.'
+
+const props = defineProps<ListboxItemProps & { class?: HTMLAttributes['class'] }>()
+const emits = defineEmits<ListboxItemEmits>()
+
+const delegatedProps = reactiveOmit(props, 'class')
+
+const forwarded = useForwardPropsEmits(delegatedProps, emits)
+
+const id = useId()
+const { filterState, allItems, allGroups } = useCommand()
+const groupContext = useCommandGroup()
+
+const isRender = computed(() => {
+  if (!filterState.search) {
+    return true
+  }
+  else {
+    const filteredCurrentItem = filterState.filtered.items.get(id)
+    // If the filtered items is undefined means not in the all times map yet
+    // Do the first render to add into the map
+    if (filteredCurrentItem === undefined) {
+      return true
+    }
+
+    // Check with filter
+    return filteredCurrentItem > 0
+  }
+})
+
+const itemRef = ref()
+const currentElement = useCurrentElement(itemRef)
+onMounted(() => {
+  if (!(currentElement.value instanceof HTMLElement))
+    return
+
+  // textValue to perform filter
+  allItems.value.set(id, currentElement.value.textContent ?? (props.value?.toString() ?? ''))
+
+  const groupId = groupContext?.id
+  if (groupId) {
+    if (!allGroups.value.has(groupId)) {
+      allGroups.value.set(groupId, new Set([id]))
+    }
+    else {
+      allGroups.value.get(groupId)?.add(id)
+    }
+  }
+})
+onUnmounted(() => {
+  allItems.value.delete(id)
+})
+</script>
+
+<template>
+  <ListboxItem
+    v-if="isRender"
+    v-bind="forwarded"
+    :id="id"
+    ref="itemRef"
+    data-slot="command-item"
+    :class="cn('data-[highlighted]:bg-accent data-[highlighted]:text-accent-foreground [&_svg:not([class*=\'text-\'])]:text-muted-foreground relative flex cursor-default items-center gap-2 rounded-sm px-2 py-3 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*=\'size-\'])]:size-4', props.class)"
+    @select="() => {
+      filterState.search = ''
+    }"
+  >
+    <slot />
+  </ListboxItem>
+</template>
diff --git a/packages/shadcn-vue/components/ui/command/CommandList.vue b/packages/shadcn-vue/components/ui/command/CommandList.vue
new file mode 100644
index 0000000..483bc4c
--- /dev/null
+++ b/packages/shadcn-vue/components/ui/command/CommandList.vue
@@ -0,0 +1,25 @@
+<script setup lang="ts">
+import type { ListboxContentProps } from 'reka-ui'
+import type { HTMLAttributes } from 'vue'
+import { cn } from '@repo/shadcn-vue/lib/utils'
+import { reactiveOmit } from '@vueuse/core'
+import { ListboxContent, useForwardProps } from 'reka-ui'
+
+const props = defineProps<ListboxContentProps & { class?: HTMLAttributes['class'] }>()
+
+const delegatedProps = reactiveOmit(props, 'class')
+
+const forwarded = useForwardProps(delegatedProps)
+</script>
+
+<template>
+  <ListboxContent
+    data-slot="command-list"
+    v-bind="forwarded"
+    :class="cn('max-h-[300px] scroll-py-1 overflow-x-hidden overflow-y-auto', props.class)"
+  >
+    <div role="presentation">
+      <slot />
+    </div>
+  </ListboxContent>
+</template>
diff --git a/packages/shadcn-vue/components/ui/command/CommandSeparator.vue b/packages/shadcn-vue/components/ui/command/CommandSeparator.vue
new file mode 100644
index 0000000..410bca0
--- /dev/null
+++ b/packages/shadcn-vue/components/ui/command/CommandSeparator.vue
@@ -0,0 +1,21 @@
+<script setup lang="ts">
+import type { SeparatorProps } from 'reka-ui'
+import type { HTMLAttributes } from 'vue'
+import { cn } from '@repo/shadcn-vue/lib/utils'
+import { reactiveOmit } from '@vueuse/core'
+import { Separator } from 'reka-ui'
+
+const props = defineProps<SeparatorProps & { class?: HTMLAttributes['class'] }>()
+
+const delegatedProps = reactiveOmit(props, 'class')
+</script>
+
+<template>
+  <Separator
+    data-slot="command-separator"
+    v-bind="delegatedProps"
+    :class="cn('bg-border -mx-1 h-px', props.class)"
+  >
+    <slot />
+  </Separator>
+</template>
diff --git a/packages/shadcn-vue/components/ui/command/CommandShortcut.vue b/packages/shadcn-vue/components/ui/command/CommandShortcut.vue
new file mode 100644
index 0000000..fda5ac8
--- /dev/null
+++ b/packages/shadcn-vue/components/ui/command/CommandShortcut.vue
@@ -0,0 +1,17 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
+import { cn } from '@repo/shadcn-vue/lib/utils'
+
+const props = defineProps<{
+  class?: HTMLAttributes['class']
+}>()
+</script>
+
+<template>
+  <span
+    data-slot="command-shortcut"
+    :class="cn('text-muted-foreground ml-auto text-xs tracking-widest', props.class)"
+  >
+    <slot />
+  </span>
+</template>
diff --git a/packages/shadcn-vue/components/ui/command/index.ts b/packages/shadcn-vue/components/ui/command/index.ts
new file mode 100644
index 0000000..cb48e1e
--- /dev/null
+++ b/packages/shadcn-vue/components/ui/command/index.ts
@@ -0,0 +1,25 @@
+import type { Ref } from 'vue'
+import { createContext } from 'reka-ui'
+
+export { default as Command } from './Command.vue'
+export { default as CommandDialog } from './CommandDialog.vue'
+export { default as CommandEmpty } from './CommandEmpty.vue'
+export { default as CommandGroup } from './CommandGroup.vue'
+export { default as CommandInput } from './CommandInput.vue'
+export { default as CommandItem } from './CommandItem.vue'
+export { default as CommandList } from './CommandList.vue'
+export { default as CommandSeparator } from './CommandSeparator.vue'
+export { default as CommandShortcut } from './CommandShortcut.vue'
+
+export const [useCommand, provideCommandContext] = createContext<{
+  allItems: Ref<Map<string, string>>
+  allGroups: Ref<Map<string, Set<string>>>
+  filterState: {
+    search: string
+    filtered: { count: number, items: Map<string, number>, groups: Set<string> }
+  }
+}>('Command')
+
+export const [useCommandGroup, provideCommandGroupContext] = createContext<{
+  id?: string
+}>('CommandGroup')