diff --git a/apps/docs/public/registry/index.json b/apps/docs/public/registry/index.json
index 5392f695..0bb4b41f 100644
--- a/apps/docs/public/registry/index.json
+++ b/apps/docs/public/registry/index.json
@@ -128,7 +128,8 @@
   {
     "name": "command",
     "dependencies": [
-      "@kobalte/core"
+      "@kobalte/core",
+      "cmdk-solid"
     ],
     "registryDependencies": [
       "dialog"
diff --git a/apps/docs/public/registry/ui/command.json b/apps/docs/public/registry/ui/command.json
index fe845a79..ac88718c 100644
--- a/apps/docs/public/registry/ui/command.json
+++ b/apps/docs/public/registry/ui/command.json
@@ -1,7 +1,8 @@
 {
   "name": "command",
   "dependencies": [
-    "@kobalte/core"
+    "@kobalte/core",
+    "cmdk-solid"
   ],
   "registryDependencies": [
     "dialog"
@@ -9,7 +10,7 @@
   "files": [
     {
       "name": "command.tsx",
-      "content": "import type { ComponentProps, VoidComponent, VoidProps } from \"solid-js\"\nimport { splitProps, type ParentComponent } from \"solid-js\"\n\nimport type { Dialog as DialogPrimitive } from \"@kobalte/core\"\nimport { Combobox as ComboboxPrimitive } from \"@kobalte/core\"\n\nimport { cn } from \"~/lib/utils\"\nimport { Dialog, DialogContent } from \"~/registry/ui/dialog\"\n\ntype CommandProps<Option, OptGroup> = Omit<\n  ComboboxPrimitive.ComboboxRootProps<Option, OptGroup>,\n  | \"open\"\n  | \"defaultOpen\"\n  | \"multiple\"\n  | \"value\"\n  | \"defaultValue\"\n  | \"removeOnBackspace\"\n  | \"readOnly\"\n  | \"allowsEmptyCollection\"\n>\n\nconst Command = <Option, OptGroup>(props: CommandProps<Option, OptGroup>) => {\n  const [local, rest] = splitProps(props, [\"class\"])\n\n  return (\n    <ComboboxPrimitive.Root\n      // force render list\n      open\n      // @ts-expect-error -- prevent select\n      value=\"\"\n      allowsEmptyCollection\n      class={cn(\n        \"flex size-full flex-col overflow-hidden rounded-md bg-popover text-popover-foreground\",\n        local.class\n      )}\n      {...rest}\n    />\n  )\n}\n\nconst CommandInput: VoidComponent<ComboboxPrimitive.ComboboxInputProps> = (props) => {\n  const [local, rest] = splitProps(props, [\"class\"])\n\n  return (\n    <ComboboxPrimitive.Control class=\"flex items-center border-b px-3\" cmdk-input-wrapper=\"\">\n      <svg\n        xmlns=\"http://www.w3.org/2000/svg\"\n        viewBox=\"0 0 24 24\"\n        fill=\"none\"\n        stroke=\"currentColor\"\n        stroke-width=\"2\"\n        stroke-linecap=\"round\"\n        stroke-linejoin=\"round\"\n        class=\"mr-2 size-4 shrink-0 opacity-50\"\n      >\n        <path d=\"M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0\" />\n        <path d=\"M21 21l-6 -6\" />\n      </svg>\n      <ComboboxPrimitive.Input\n        cmdk-input=\"\"\n        class={cn(\n          \"flex h-10 w-full rounded-md bg-transparent py-3 text-sm outline-none placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50\",\n          local.class\n        )}\n        {...rest}\n      />\n    </ComboboxPrimitive.Control>\n  )\n}\n\nconst CommandList = <Option, OptGroup>(\n  props: VoidProps<ComboboxPrimitive.ComboboxListboxProps<Option, OptGroup>>\n) => {\n  const [local, rest] = splitProps(props, [\"class\"])\n\n  return (\n    <ComboboxPrimitive.Listbox\n      cmdk-list=\"\"\n      class={cn(\"max-h-[300px] overflow-y-auto overflow-x-hidden p-1\", local.class)}\n      {...rest}\n    />\n  )\n}\n\nconst CommandItem: ParentComponent<ComboboxPrimitive.ComboboxItemProps> = (props) => {\n  const [local, rest] = splitProps(props, [\"class\", \"item\"])\n\n  return (\n    <ComboboxPrimitive.Item\n      item={local.item}\n      cmdk-item=\"\"\n      class={cn(\n        \"relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none data-[disabled]:pointer-events-none data-[highlighted]:bg-accent data-[highlighted]:text-accent-foreground data-[disabled]:opacity-50\",\n        local.class\n      )}\n      {...rest}\n    />\n  )\n}\n\nconst CommandItemLabel = ComboboxPrimitive.ItemLabel\n\nconst CommandHeading: ParentComponent<ComboboxPrimitive.ComboboxSectionProps> = (props) => {\n  const [local, rest] = splitProps(props, [\"class\"])\n\n  return (\n    <ComboboxPrimitive.Section\n      cmdk-heading=\"\"\n      class={cn(\n        \"px-2 py-1.5 text-xs font-medium text-muted-foreground [&:not(&:first-of-type)]:mt-2\",\n        local.class\n      )}\n      {...rest}\n    />\n  )\n}\n\nconst CommandItemShortcut: ParentComponent<ComponentProps<\"span\">> = (props) => {\n  const [local, rest] = splitProps(props, [\"class\"])\n\n  return (\n    <span\n      class={cn(\"ml-auto text-xs tracking-widest text-muted-foreground\", local.class)}\n      {...rest}\n    />\n  )\n}\n\ntype CommandDialogProps<Option, OptGroup> = DialogPrimitive.DialogRootProps &\n  CommandProps<Option, OptGroup>\n\nconst CommandDialog = <Option, OptGroup>(props: CommandDialogProps<Option, OptGroup>) => {\n  const [local, rest] = splitProps(props, [\"children\"])\n\n  return (\n    <Dialog {...rest}>\n      <DialogContent class=\"overflow-hidden p-0\">\n        <Command\n          class=\"[&_[cmdk-heading]]:px-2 [&_[cmdk-heading]]:font-medium [&_[cmdk-heading]]:text-muted-foreground [&_[cmdk-input-wrapper]_svg]:size-5 [&_[cmdk-input]]:h-12 [&_[cmdk-item]]:px-2 [&_[cmdk-item]]:py-3 [&_[cmdk-item]_svg]:size-5 [&_[cmdk-list]:not([hidden])_~[cmdk-list]]:pt-0 [&_[cmdk-list]]:px-2\"\n          {...rest}\n        >\n          {local.children}\n        </Command>\n      </DialogContent>\n    </Dialog>\n  )\n}\n\nexport {\n  Command,\n  CommandInput,\n  CommandList,\n  CommandItem,\n  CommandItemLabel,\n  CommandItemShortcut,\n  CommandHeading,\n  CommandDialog\n}\n"
+      "content": "import type { ComponentProps, VoidComponent } from \"solid-js\"\nimport { splitProps, type ParentComponent } from \"solid-js\"\n\nimport type { Dialog as DialogPrimitive } from \"@kobalte/core\"\nimport {\n  CommandEmptyProps,\n  CommandGroupProps,\n  CommandInputProps,\n  CommandItemProps,\n  CommandListProps,\n  Command as CommandPrimitive,\n  CommandRootProps,\n  CommandSeparatorProps\n} from \"cmdk-solid\"\n\nimport { cn } from \"~/lib/utils\"\nimport { Dialog, DialogContent } from \"~/registry/ui/dialog\"\n\nconst Command: ParentComponent<CommandRootProps> = (props) => {\n  const [local, rest] = splitProps(props, [\"class\"])\n\n  return (\n    <CommandPrimitive\n      class={cn(\n        \"flex size-full flex-col overflow-hidden rounded-md bg-popover text-popover-foreground\",\n        local.class\n      )}\n      {...rest}\n    />\n  )\n}\n\ntype CommandDialogProps = DialogPrimitive.DialogRootProps\n\nconst CommandDialog: ParentComponent<CommandDialogProps> = (props) => {\n  const [local, rest] = splitProps(props, [\"children\"])\n\n  return (\n    <Dialog {...rest}>\n      <DialogContent class=\"overflow-hidden p-0\">\n        <Command\n          class=\"[&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-muted-foreground [&_[cmdk-group]:not([hidden])_~[cmdk-group]]:pt-0 [&_[cmdk-group]]:px-2 [&_[cmdk-input-wrapper]_svg]:size-5 [&_[cmdk-input]]:h-12 [&_[cmdk-item]]:px-2 [&_[cmdk-item]]:py-3 [&_[cmdk-item]_svg]:size-5\"\n          {...local}\n        />\n      </DialogContent>\n    </Dialog>\n  )\n}\n\nconst CommandInput: VoidComponent<CommandInputProps> = (props) => {\n  const [local, rest] = splitProps(props, [\"class\"])\n\n  return (\n    <div class=\"flex items-center border-b px-3\" cmdk-input-wrapper=\"\">\n      <svg\n        xmlns=\"http://www.w3.org/2000/svg\"\n        viewBox=\"0 0 24 24\"\n        fill=\"none\"\n        stroke=\"currentColor\"\n        stroke-width=\"2\"\n        stroke-linecap=\"round\"\n        stroke-linejoin=\"round\"\n        class=\"mr-2 size-4 shrink-0 opacity-50\"\n      >\n        <path d=\"M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0\" />\n        <path d=\"M21 21l-6 -6\" />\n      </svg>\n      <CommandPrimitive.Input\n        class={cn(\n          \"flex h-10 w-full rounded-md bg-transparent py-3 text-sm outline-none placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50\",\n          local.class\n        )}\n        {...rest}\n      />\n    </div>\n  )\n}\n\nconst CommandList: ParentComponent<CommandListProps> = (props) => {\n  const [local, rest] = splitProps(props, [\"class\"])\n\n  return (\n    <CommandPrimitive.List\n      class={cn(\"max-h-[300px] overflow-y-auto overflow-x-hidden\", local.class)}\n      {...rest}\n    />\n  )\n}\n\nconst CommandEmpty: ParentComponent<CommandEmptyProps> = (props) => {\n  const [local, rest] = splitProps(props, [\"class\"])\n\n  return <CommandPrimitive.Empty class={cn(\"py-6 text-center text-sm\", local.class)} {...rest} />\n}\n\nconst CommandGroup: ParentComponent<CommandGroupProps> = (props) => {\n  const [local, rest] = splitProps(props, [\"class\"])\n\n  return (\n    <CommandPrimitive.Group\n      class={cn(\n        \"overflow-hidden p-1 text-foreground [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:py-1.5 [&_[cmdk-group-heading]]:text-xs [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-muted-foreground\",\n        local.class\n      )}\n      {...rest}\n    />\n  )\n}\n\nconst CommandSeparator: VoidComponent<CommandSeparatorProps> = (props) => {\n  const [local, rest] = splitProps(props, [\"class\"])\n\n  return <CommandPrimitive.Separator class={cn(\"h-px bg-border\", local.class)} {...rest} />\n}\n\nconst CommandItem: ParentComponent<CommandItemProps> = (props) => {\n  const [local, rest] = splitProps(props, [\"class\"])\n\n  return (\n    <CommandPrimitive.Item\n      cmdk-item=\"\"\n      class={cn(\n        \"relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none aria-selected:bg-accent aria-selected:text-accent-foreground data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50\",\n        local.class\n      )}\n      {...rest}\n    />\n  )\n}\n\nconst CommandShortcut: ParentComponent<ComponentProps<\"span\">> = (props) => {\n  const [local, rest] = splitProps(props, [\"class\"])\n\n  return (\n    <span\n      class={cn(\"ml-auto text-xs tracking-widest text-muted-foreground\", local.class)}\n      {...rest}\n    />\n  )\n}\n\nexport {\n  Command,\n  CommandDialog,\n  CommandInput,\n  CommandList,\n  CommandEmpty,\n  CommandGroup,\n  CommandItem,\n  CommandShortcut,\n  CommandSeparator\n}\n"
     }
   ],
   "type": "ui"
diff --git a/apps/docs/src/registry/example/command-demo.tsx b/apps/docs/src/registry/example/command-demo.tsx
index cf0a2d12..eb3d1a01 100644
--- a/apps/docs/src/registry/example/command-demo.tsx
+++ b/apps/docs/src/registry/example/command-demo.tsx
@@ -1,5 +1,3 @@
-import { type JSXElement } from "solid-js"
-
 import {
   IconCalendar,
   IconMail,
@@ -10,93 +8,54 @@ import {
 } from "~/components/icons"
 import {
   Command,
-  CommandHeading,
+  CommandEmpty,
+  CommandGroup,
   CommandInput,
   CommandItem,
-  CommandItemLabel,
-  CommandItemShortcut,
-  CommandList
+  CommandList,
+  CommandSeparator,
+  CommandShortcut
 } from "~/registry/ui/command"
 
-type ListOption = {
-  icon: JSXElement
-  label: string
-  value: string
-  shortcut?: JSXElement
-}
-
-type List = {
-  label: string
-  options: ListOption[]
-}
-
 export default function CommandDemo() {
-  const data: List[] = [
-    {
-      label: "Suggestions",
-      options: [
-        {
-          icon: <IconCalendar class="mr-2 size-4" />,
-          label: "Calendar",
-          value: "Calendar"
-        },
-        {
-          icon: <IconSmile class="mr-2 size-4" />,
-          label: "Search emoji",
-          value: "Search emoji"
-        },
-        {
-          icon: <IconRocket class="mr-2 size-4" />,
-          label: "Launch",
-          value: "Launch"
-        }
-      ]
-    },
-    {
-      label: "Settings",
-      options: [
-        {
-          icon: <IconUser class="mr-2 size-4" />,
-          label: "Profile",
-          value: "Profile",
-          shortcut: <CommandItemShortcut>⌘P</CommandItemShortcut>
-        },
-        {
-          icon: <IconMail class="mr-2 size-4" />,
-          label: "Mail",
-          value: "Mail",
-          shortcut: <CommandItemShortcut>⌘B</CommandItemShortcut>
-        },
-        {
-          icon: <IconSettings class="mr-2 size-4" />,
-          label: "Setting",
-          value: "Setting",
-          shortcut: <CommandItemShortcut>⌘S</CommandItemShortcut>
-        }
-      ]
-    }
-  ]
-
   return (
-    <Command<ListOption, List>
-      options={data}
-      optionValue="value"
-      optionTextValue="label"
-      optionLabel="label"
-      optionGroupChildren="options"
-      placeholder="Type a command or search..."
-      itemComponent={(props) => (
-        <CommandItem item={props.item}>
-          {props.item.rawValue.icon}
-          <CommandItemLabel>{props.item.rawValue.label}</CommandItemLabel>
-          {props.item.rawValue.shortcut}
-        </CommandItem>
-      )}
-      sectionComponent={(props) => <CommandHeading>{props.section.rawValue.label}</CommandHeading>}
-      class="rounded-lg border shadow-md"
-    >
-      <CommandInput />
-      <CommandList />
+    <Command class="rounded-lg border shadow-md">
+      <CommandInput placeholder="Type a command or search..." />
+      <CommandList>
+        <CommandEmpty>No results found.</CommandEmpty>
+        <CommandGroup heading="Suggestions">
+          <CommandItem>
+            <IconCalendar class="mr-2 size-4" />
+            <span>Calendar</span>
+          </CommandItem>
+          <CommandItem>
+            <IconSmile class="mr-2 size-4" />
+            <span>Search Emoji</span>
+          </CommandItem>
+          <CommandItem>
+            <IconRocket class="mr-2 size-4" />
+            <span>Launch</span>
+          </CommandItem>
+        </CommandGroup>
+        <CommandSeparator />
+        <CommandGroup heading="Settings">
+          <CommandItem>
+            <IconUser class="mr-2 size-4" />
+            <span>Profile</span>
+            <CommandShortcut>⌘P</CommandShortcut>
+          </CommandItem>
+          <CommandItem>
+            <IconMail class="mr-2 size-4" />
+            <span>Mail</span>
+            <CommandShortcut>⌘B</CommandShortcut>
+          </CommandItem>
+          <CommandItem>
+            <IconSettings class="mr-2 size-4" />
+            <span>Settings</span>
+            <CommandShortcut>⌘S</CommandShortcut>
+          </CommandItem>
+        </CommandGroup>
+      </CommandList>
     </Command>
   )
 }
diff --git a/apps/docs/src/registry/example/command-dialog-demo.tsx b/apps/docs/src/registry/example/command-dialog-demo.tsx
index 941ab776..bee61547 100644
--- a/apps/docs/src/registry/example/command-dialog-demo.tsx
+++ b/apps/docs/src/registry/example/command-dialog-demo.tsx
@@ -1,4 +1,4 @@
-import { createEffect, createSignal, onCleanup, type JSXElement } from "solid-js"
+import { createEffect, createSignal, onCleanup } from "solid-js"
 
 import {
   IconCalendar,
@@ -10,73 +10,16 @@ import {
 } from "~/components/icons"
 import {
   CommandDialog,
-  CommandHeading,
+  CommandEmpty,
+  CommandGroup,
   CommandInput,
   CommandItem,
-  CommandItemLabel,
-  CommandItemShortcut,
-  CommandList
+  CommandList,
+  CommandSeparator,
+  CommandShortcut
 } from "~/registry/ui/command"
 
-type ListOption = {
-  icon: JSXElement
-  label: string
-  value: string
-  shortcut?: JSXElement
-}
-
-type List = {
-  label: string
-  options: ListOption[]
-}
-
-export default function CommandDemo() {
-  const data: List[] = [
-    {
-      label: "Suggestions",
-      options: [
-        {
-          icon: <IconCalendar class="mr-2 size-4" />,
-          label: "Calendar",
-          value: "Calendar"
-        },
-        {
-          icon: <IconSmile class="mr-2 size-4" />,
-          label: "Search emoji",
-          value: "Search emoji"
-        },
-        {
-          icon: <IconRocket class="mr-2 size-4" />,
-          label: "Launch",
-          value: "Launch"
-        }
-      ]
-    },
-    {
-      label: "Settings",
-      options: [
-        {
-          icon: <IconUser class="mr-2 size-4" />,
-          label: "Profile",
-          value: "Profile",
-          shortcut: <CommandItemShortcut>⌘P</CommandItemShortcut>
-        },
-        {
-          icon: <IconMail class="mr-2 size-4" />,
-          label: "Mail",
-          value: "Mail",
-          shortcut: <CommandItemShortcut>⌘B</CommandItemShortcut>
-        },
-        {
-          icon: <IconSettings class="mr-2 size-4" />,
-          label: "Setting",
-          value: "Setting",
-          shortcut: <CommandItemShortcut>⌘S</CommandItemShortcut>
-        }
-      ]
-    }
-  ]
-
+export default function CommandDialogDemo() {
   const [open, setOpen] = createSignal(false)
 
   createEffect(() => {
@@ -89,9 +32,7 @@ export default function CommandDemo() {
 
     document.addEventListener("keydown", down)
 
-    onCleanup(() => {
-      document.removeEventListener("keydown", down)
-    })
+    onCleanup(() => document.removeEventListener("keydown", down))
   })
 
   return (
@@ -102,28 +43,43 @@ export default function CommandDemo() {
           <span class="text-xs">⌘</span>J
         </kbd>
       </p>
-      <CommandDialog<ListOption, List>
-        options={data}
-        optionValue="value"
-        optionTextValue="label"
-        optionLabel="label"
-        optionGroupChildren="options"
-        placeholder="Type a command or search..."
-        itemComponent={(props) => (
-          <CommandItem item={props.item}>
-            {props.item.rawValue.icon}
-            <CommandItemLabel>{props.item.rawValue.label}</CommandItemLabel>
-            {props.item.rawValue.shortcut}
-          </CommandItem>
-        )}
-        sectionComponent={(props) => (
-          <CommandHeading>{props.section.rawValue.label}</CommandHeading>
-        )}
-        open={open()}
-        onOpenChange={setOpen}
-      >
-        <CommandInput />
-        <CommandList />
+      <CommandDialog open={open()} onOpenChange={setOpen}>
+        <CommandInput placeholder="Type a command or search..." />
+        <CommandList>
+          <CommandEmpty>No results found.</CommandEmpty>
+          <CommandGroup heading="Suggestions">
+            <CommandItem>
+              <IconCalendar class="mr-2 size-4" />
+              <span>Calendar</span>
+            </CommandItem>
+            <CommandItem>
+              <IconSmile class="mr-2 size-4" />
+              <span>Search Emoji</span>
+            </CommandItem>
+            <CommandItem>
+              <IconRocket class="mr-2 size-4" />
+              <span>Launch</span>
+            </CommandItem>
+          </CommandGroup>
+          <CommandSeparator />
+          <CommandGroup heading="Settings">
+            <CommandItem>
+              <IconUser class="mr-2 size-4" />
+              <span>Profile</span>
+              <CommandShortcut>⌘P</CommandShortcut>
+            </CommandItem>
+            <CommandItem>
+              <IconMail class="mr-2 size-4" />
+              <span>Mail</span>
+              <CommandShortcut>⌘B</CommandShortcut>
+            </CommandItem>
+            <CommandItem>
+              <IconSettings class="mr-2 size-4" />
+              <span>Settings</span>
+              <CommandShortcut>⌘S</CommandShortcut>
+            </CommandItem>
+          </CommandGroup>
+        </CommandList>
       </CommandDialog>
     </>
   )
diff --git a/apps/docs/src/registry/registry.ts b/apps/docs/src/registry/registry.ts
index daa6d6e8..1c9e4d42 100644
--- a/apps/docs/src/registry/registry.ts
+++ b/apps/docs/src/registry/registry.ts
@@ -80,7 +80,7 @@ const ui: Registry = [
   {
     name: "command",
     type: "ui",
-    dependencies: ["@kobalte/core"],
+    dependencies: ["@kobalte/core", "cmdk-solid"],
     registryDependencies: ["dialog"],
     files: ["ui/command.tsx"]
   },
diff --git a/apps/docs/src/registry/ui/command.tsx b/apps/docs/src/registry/ui/command.tsx
index 22a64a83..1ed271cb 100644
--- a/apps/docs/src/registry/ui/command.tsx
+++ b/apps/docs/src/registry/ui/command.tsx
@@ -1,34 +1,26 @@
-import type { ComponentProps, VoidComponent, VoidProps } from "solid-js"
+import type { ComponentProps, VoidComponent } from "solid-js"
 import { splitProps, type ParentComponent } from "solid-js"
 
 import type { Dialog as DialogPrimitive } from "@kobalte/core"
-import { Combobox as ComboboxPrimitive } from "@kobalte/core"
+import {
+  CommandEmptyProps,
+  CommandGroupProps,
+  CommandInputProps,
+  CommandItemProps,
+  CommandListProps,
+  Command as CommandPrimitive,
+  CommandRootProps,
+  CommandSeparatorProps
+} from "cmdk-solid"
 
 import { cn } from "~/lib/utils"
 import { Dialog, DialogContent } from "~/registry/ui/dialog"
 
-type CommandProps<Option, OptGroup> = Omit<
-  ComboboxPrimitive.ComboboxRootProps<Option, OptGroup>,
-  | "open"
-  | "defaultOpen"
-  | "multiple"
-  | "value"
-  | "defaultValue"
-  | "removeOnBackspace"
-  | "readOnly"
-  | "allowsEmptyCollection"
->
-
-const Command = <Option, OptGroup>(props: CommandProps<Option, OptGroup>) => {
+const Command: ParentComponent<CommandRootProps> = (props) => {
   const [local, rest] = splitProps(props, ["class"])
 
   return (
-    <ComboboxPrimitive.Root
-      // force render list
-      open
-      // @ts-expect-error -- prevent select
-      value=""
-      allowsEmptyCollection
+    <CommandPrimitive
       class={cn(
         "flex size-full flex-col overflow-hidden rounded-md bg-popover text-popover-foreground",
         local.class
@@ -38,11 +30,28 @@ const Command = <Option, OptGroup>(props: CommandProps<Option, OptGroup>) => {
   )
 }
 
-const CommandInput: VoidComponent<ComboboxPrimitive.ComboboxInputProps> = (props) => {
+type CommandDialogProps = DialogPrimitive.DialogRootProps
+
+const CommandDialog: ParentComponent<CommandDialogProps> = (props) => {
+  const [local, rest] = splitProps(props, ["children"])
+
+  return (
+    <Dialog {...rest}>
+      <DialogContent class="overflow-hidden p-0">
+        <Command
+          class="[&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-muted-foreground [&_[cmdk-group]:not([hidden])_~[cmdk-group]]:pt-0 [&_[cmdk-group]]:px-2 [&_[cmdk-input-wrapper]_svg]:size-5 [&_[cmdk-input]]:h-12 [&_[cmdk-item]]:px-2 [&_[cmdk-item]]:py-3 [&_[cmdk-item]_svg]:size-5"
+          {...local}
+        />
+      </DialogContent>
+    </Dialog>
+  )
+}
+
+const CommandInput: VoidComponent<CommandInputProps> = (props) => {
   const [local, rest] = splitProps(props, ["class"])
 
   return (
-    <ComboboxPrimitive.Control class="flex items-center border-b px-3" cmdk-input-wrapper="">
+    <div class="flex items-center border-b px-3" cmdk-input-wrapper="">
       <svg
         xmlns="http://www.w3.org/2000/svg"
         viewBox="0 0 24 24"
@@ -56,41 +65,41 @@ const CommandInput: VoidComponent<ComboboxPrimitive.ComboboxInputProps> = (props
         <path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0" />
         <path d="M21 21l-6 -6" />
       </svg>
-      <ComboboxPrimitive.Input
-        cmdk-input=""
+      <CommandPrimitive.Input
         class={cn(
           "flex h-10 w-full rounded-md bg-transparent py-3 text-sm outline-none placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50",
           local.class
         )}
         {...rest}
       />
-    </ComboboxPrimitive.Control>
+    </div>
   )
 }
 
-const CommandList = <Option, OptGroup>(
-  props: VoidProps<ComboboxPrimitive.ComboboxListboxProps<Option, OptGroup>>
-) => {
+const CommandList: ParentComponent<CommandListProps> = (props) => {
   const [local, rest] = splitProps(props, ["class"])
 
   return (
-    <ComboboxPrimitive.Listbox
-      cmdk-list=""
-      class={cn("max-h-[300px] overflow-y-auto overflow-x-hidden p-1", local.class)}
+    <CommandPrimitive.List
+      class={cn("max-h-[300px] overflow-y-auto overflow-x-hidden", local.class)}
       {...rest}
     />
   )
 }
 
-const CommandItem: ParentComponent<ComboboxPrimitive.ComboboxItemProps> = (props) => {
-  const [local, rest] = splitProps(props, ["class", "item"])
+const CommandEmpty: ParentComponent<CommandEmptyProps> = (props) => {
+  const [local, rest] = splitProps(props, ["class"])
+
+  return <CommandPrimitive.Empty class={cn("py-6 text-center text-sm", local.class)} {...rest} />
+}
+
+const CommandGroup: ParentComponent<CommandGroupProps> = (props) => {
+  const [local, rest] = splitProps(props, ["class"])
 
   return (
-    <ComboboxPrimitive.Item
-      item={local.item}
-      cmdk-item=""
+    <CommandPrimitive.Group
       class={cn(
-        "relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none data-[disabled]:pointer-events-none data-[highlighted]:bg-accent data-[highlighted]:text-accent-foreground data-[disabled]:opacity-50",
+        "overflow-hidden p-1 text-foreground [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:py-1.5 [&_[cmdk-group-heading]]:text-xs [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-muted-foreground",
         local.class
       )}
       {...rest}
@@ -98,16 +107,20 @@ const CommandItem: ParentComponent<ComboboxPrimitive.ComboboxItemProps> = (props
   )
 }
 
-const CommandItemLabel = ComboboxPrimitive.ItemLabel
+const CommandSeparator: VoidComponent<CommandSeparatorProps> = (props) => {
+  const [local, rest] = splitProps(props, ["class"])
 
-const CommandHeading: ParentComponent<ComboboxPrimitive.ComboboxSectionProps> = (props) => {
+  return <CommandPrimitive.Separator class={cn("h-px bg-border", local.class)} {...rest} />
+}
+
+const CommandItem: ParentComponent<CommandItemProps> = (props) => {
   const [local, rest] = splitProps(props, ["class"])
 
   return (
-    <ComboboxPrimitive.Section
-      cmdk-heading=""
+    <CommandPrimitive.Item
+      cmdk-item=""
       class={cn(
-        "px-2 py-1.5 text-xs font-medium text-muted-foreground [&:not(&:first-of-type)]:mt-2",
+        "relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none aria-selected:bg-accent aria-selected:text-accent-foreground data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50",
         local.class
       )}
       {...rest}
@@ -115,7 +128,7 @@ const CommandHeading: ParentComponent<ComboboxPrimitive.ComboboxSectionProps> =
   )
 }
 
-const CommandItemShortcut: ParentComponent<ComponentProps<"span">> = (props) => {
+const CommandShortcut: ParentComponent<ComponentProps<"span">> = (props) => {
   const [local, rest] = splitProps(props, ["class"])
 
   return (
@@ -126,33 +139,14 @@ const CommandItemShortcut: ParentComponent<ComponentProps<"span">> = (props) =>
   )
 }
 
-type CommandDialogProps<Option, OptGroup> = DialogPrimitive.DialogRootProps &
-  CommandProps<Option, OptGroup>
-
-const CommandDialog = <Option, OptGroup>(props: CommandDialogProps<Option, OptGroup>) => {
-  const [local, rest] = splitProps(props, ["children"])
-
-  return (
-    <Dialog {...rest}>
-      <DialogContent class="overflow-hidden p-0">
-        <Command
-          class="[&_[cmdk-heading]]:px-2 [&_[cmdk-heading]]:font-medium [&_[cmdk-heading]]:text-muted-foreground [&_[cmdk-input-wrapper]_svg]:size-5 [&_[cmdk-input]]:h-12 [&_[cmdk-item]]:px-2 [&_[cmdk-item]]:py-3 [&_[cmdk-item]_svg]:size-5 [&_[cmdk-list]:not([hidden])_~[cmdk-list]]:pt-0 [&_[cmdk-list]]:px-2"
-          {...rest}
-        >
-          {local.children}
-        </Command>
-      </DialogContent>
-    </Dialog>
-  )
-}
-
 export {
   Command,
+  CommandDialog,
   CommandInput,
   CommandList,
+  CommandEmpty,
+  CommandGroup,
   CommandItem,
-  CommandItemLabel,
-  CommandItemShortcut,
-  CommandHeading,
-  CommandDialog
+  CommandShortcut,
+  CommandSeparator
 }
diff --git a/apps/docs/src/routes/docs/components/command.mdx b/apps/docs/src/routes/docs/components/command.mdx
index 45dbf06b..ad5c9fdd 100644
--- a/apps/docs/src/routes/docs/components/command.mdx
+++ b/apps/docs/src/routes/docs/components/command.mdx
@@ -2,6 +2,10 @@
 
 <ComponentPreview name="command-demo" />
 
+## About
+
+The `<Command />` component uses the [`cmdk-solid`](https://cmdk-solid.vercel.app) component by [create-signal](https://github.com/create-signal/cmdk-solid).
+
 ## Installation
 
 <Tabs defaultValue="cli">
@@ -25,7 +29,7 @@ npx solidui-cli@latest add command
 <Step>Install the following dependencies: </Step>
 
 ```bash
-npm install @kobalte/core
+npm install @kobalte/core cmdk-solid
 ```
 
 <Step>Copy and paste the following code into your project: </Step>
@@ -42,28 +46,34 @@ npm install @kobalte/core
 ```tsx
 import {
   Command,
+  CommandDialog,
+  CommandEmpty,
+  CommandGroup,
   CommandInput,
   CommandItem,
-  CommandItemLabel,
-  CommandList
+  CommandList,
+  CommandSeparator,
+  CommandShortcut,
 } from "@/components/ui/command"
 ```
 
 ```tsx
-const ALL_OPTIONS = ["Apple", "Banana", "Blueberry", "Grapes", "Pineapple"]
-```
-
-```tsx
-<Command
-  options={ALL_OPTIONS}
-  itemComponent={(props) => (
-    <CommandItem item={props.item}>
-      <CommandItemLabel>{props.item.rawValue}</CommandItemLabel>
-    </CommandItem>
-  )}
->
-  <CommandInput />
-  <CommandList />
+<Command>
+  <CommandInput placeholder="Type a command or search..." />
+  <CommandList>
+    <CommandEmpty>No results found.</CommandEmpty>
+    <CommandGroup heading="Suggestions">
+      <CommandItem>Calendar</CommandItem>
+      <CommandItem>Search Emoji</CommandItem>
+      <CommandItem>Calculator</CommandItem>
+    </CommandGroup>
+    <CommandSeparator />
+    <CommandGroup heading="Settings">
+      <CommandItem>Profile</CommandItem>
+      <CommandItem>Billing</CommandItem>
+      <CommandItem>Settings</CommandItem>
+    </CommandGroup>
+  </CommandList>
 </Command>
 ```
 
@@ -86,25 +96,25 @@ export function CommandMenu() {
         setOpen((open) => !open)
       }
     }
-
+ 
     document.addEventListener("keydown", down)
-
+ 
     onCleanup(() => {
       document.removeEventListener("keydown", down)
     })
   })
 
   return (
-    <CommandDialog
-      options={ALL_OPTIONS}
-      itemComponent={(props) => (
-        <CommandItem item={props.item}>
-          <CommandItemLabel>{props.item.rawValue}</CommandItemLabel>
-        </CommandItem>
-      )}
-    >
-      <CommandInput />
-      <CommandList />
+    <CommandDialog open={open()} onOpenChange={setOpen}>
+      <CommandInput placeholder="Type a command or search..." />
+      <CommandList>
+        <CommandEmpty>No results found.</CommandEmpty>
+        <CommandGroup heading="Suggestions">
+          <CommandItem>Calendar</CommandItem>
+          <CommandItem>Search Emoji</CommandItem>
+          <CommandItem>Calculator</CommandItem>
+        </CommandGroup>
+      </CommandList>
     </CommandDialog>
   )
 }