diff --git a/bun.lock b/bun.lock
index a897954..1571e8d 100644
--- a/bun.lock
+++ b/bun.lock
@@ -1,6 +1,5 @@
 {
   "lockfileVersion": 1,
-  "configVersion": 1,
   "workspaces": {
     "": {
       "name": "so4-market",
@@ -125,6 +124,7 @@
         "@vitest/coverage-v8": "^3.2.0",
         "axe-core": "^4.12.1",
         "eslint": "^9.39.2",
+        "jsdom": "^30.0.1",
         "tailwindcss": "^4.1.18",
         "typescript": "^5.9.3",
         "vitest": "3",
diff --git a/packages/ui/package.json b/packages/ui/package.json
index eebc517..3b3cbd5 100644
--- a/packages/ui/package.json
+++ b/packages/ui/package.json
@@ -39,6 +39,7 @@
     "@tanstack/eslint-config": "^0.3.0",
     "axe-core": "^4.12.1",
     "eslint": "^9.39.2",
+    "jsdom": "^30.0.1",
     "tailwindcss": "^4.1.18",
     "typescript": "^5.9.3",
     "@vitest/coverage-v8": "^3.2.0",
diff --git a/packages/ui/src/components/__tests__/command-menu.test.tsx b/packages/ui/src/components/__tests__/command-menu.test.tsx
new file mode 100644
index 0000000..8c0af8f
--- /dev/null
+++ b/packages/ui/src/components/__tests__/command-menu.test.tsx
@@ -0,0 +1,121 @@
+import { useRef, useState } from "react"
+import { cleanup, render, screen } from "@testing-library/react"
+import userEvent from "@testing-library/user-event"
+import { afterEach, describe, expect, it, vi } from "vitest"
+
+import { CommandMenu, type CommandMenuGroup } from "@workspace/ui/components/command-menu"
+
+const openBilling = vi.fn()
+const openSettings = vi.fn()
+
+const groups: CommandMenuGroup[] = [
+  {
+    id: "workspace",
+    label: "Workspace",
+    items: [
+      {
+        id: "billing",
+        label: "Open billing",
+        description: "Manage invoices and payment methods",
+        shortcut: ["⌘", "B"],
+        onSelect: openBilling,
+      },
+      {
+        id: "settings",
+        label: "Open settings",
+        description: "Manage account preferences",
+        shortcut: ["⌘", ","],
+        onSelect: openSettings,
+      },
+    ],
+  },
+]
+
+function CommandMenuHarness() {
+  const [open, setOpen] = useState(false)
+  const [query, setQuery] = useState("")
+  const triggerRef = useRef<HTMLButtonElement>(null)
+
+  return (
+    <>
+      <button ref={triggerRef} type="button" onClick={() => setOpen(true)}>
+        Open commands
+      </button>
+      <CommandMenu
+        open={open}
+        onOpenChange={setOpen}
+        query={query}
+        onQueryChange={setQuery}
+        groups={groups}
+        triggerRef={triggerRef}
+      />
+    </>
+  )
+}
+
+afterEach(() => {
+  cleanup()
+  openBilling.mockClear()
+  openSettings.mockClear()
+})
+
+describe("CommandMenu", () => {
+  it("opens with focus in the search input", async () => {
+    const user = userEvent.setup()
+    render(<CommandMenuHarness />)
+
+    const trigger = screen.getByRole("button", { name: "Open commands" })
+    await user.click(trigger)
+
+    expect(document.activeElement).toBe(
+      screen.getByRole("combobox", { name: "Search commands" }),
+    )
+  })
+
+  it("filters grouped results from the controlled query", async () => {
+    const user = userEvent.setup()
+    render(<CommandMenuHarness />)
+    await user.click(screen.getByRole("button", { name: "Open commands" }))
+
+    await user.type(screen.getByRole("combobox", { name: "Search commands" }), "billing")
+
+    expect(screen.getByText("Open billing")).toBeTruthy()
+    expect(screen.queryByText("Open settings")).toBeNull()
+  })
+
+  it("activates the highlighted result with keyboard input", async () => {
+    const user = userEvent.setup()
+    render(<CommandMenuHarness />)
+    await user.click(screen.getByRole("button", { name: "Open commands" }))
+
+    const input = screen.getByRole("combobox", { name: "Search commands" })
+    await user.type(input, "billing")
+    await user.keyboard("{ArrowDown}{Enter}")
+
+    expect(openBilling).toHaveBeenCalledOnce()
+    expect(screen.queryByRole("dialog")).toBeNull()
+  })
+
+  it("shows the shared empty state for no matches", async () => {
+    const user = userEvent.setup()
+    render(<CommandMenuHarness />)
+    await user.click(screen.getByRole("button", { name: "Open commands" }))
+
+    await user.type(screen.getByRole("combobox", { name: "Search commands" }), "unknown")
+
+    expect(screen.getByText("No commands found")).toBeTruthy()
+    expect(screen.getByText("Try a different search term.")).toBeTruthy()
+  })
+
+  it("closes on Escape and restores focus to the trigger", async () => {
+    const user = userEvent.setup()
+    render(<CommandMenuHarness />)
+    const trigger = screen.getByRole("button", { name: "Open commands" })
+    await user.click(trigger)
+
+    await user.keyboard("{Escape}")
+
+    expect(screen.queryByRole("dialog")).toBeNull()
+    expect(document.activeElement).toBe(trigger)
+  })
+})
diff --git a/packages/ui/src/components/combobox.tsx b/packages/ui/src/components/combobox.tsx
new file mode 100644
index 0000000..bedde99
--- /dev/null
+++ b/packages/ui/src/components/combobox.tsx
@@ -0,0 +1,83 @@
+import * as React from "react"
+import { Combobox as ComboboxPrimitive } from "@base-ui/react/combobox"
+
+import { Input } from "@workspace/ui/components/input"
+import { cn } from "@workspace/ui/lib/utils"
+
+function Combobox<Value>(props: ComboboxPrimitive.Root.Props<Value>) {
+  return <ComboboxPrimitive.Root data-slot="combobox" {...props} />
+}
+
+function ComboboxInput({ className, ...props }: ComboboxPrimitive.Input.Props) {
+  return (
+    <ComboboxPrimitive.Input
+      data-slot="combobox-input"
+      render={<Input />}
+      className={cn("h-10 border-0 bg-transparent px-3 text-sm shadow-none focus-visible:ring-0", className)}
+      {...props}
+    />
+  )
+}
+
+function ComboboxList({ className, ...props }: ComboboxPrimitive.List.Props) {
+  return (
+    <ComboboxPrimitive.List
+      data-slot="combobox-list"
+      className={cn("outline-none", className)}
+      {...props}
+    />
+  )
+}
+
+function ComboboxItem({ className, ...props }: ComboboxPrimitive.Item.Props) {
+  return (
+    <ComboboxPrimitive.Item
+      data-slot="combobox-item"
+      className={cn(
+        "flex min-h-10 w-full items-center gap-3 rounded-md px-3 py-2 text-left text-sm outline-none transition-colors data-highlighted:bg-accent data-highlighted:text-accent-foreground data-disabled:pointer-events-none data-disabled:opacity-50",
+        className,
+      )}
+      {...props}
+    />
+  )
+}
+
+function ComboboxGroup({ className, ...props }: ComboboxPrimitive.Group.Props) {
+  return (
+    <ComboboxPrimitive.Group
+      data-slot="combobox-group"
+      className={cn("space-y-1", className)}
+      {...props}
+    />
+  )
+}
+
+function ComboboxGroupLabel({ className, ...props }: ComboboxPrimitive.GroupLabel.Props) {
+  return (
+    <ComboboxPrimitive.GroupLabel
+      data-slot="combobox-group-label"
+      className={cn("px-3 py-2 text-[0.625rem] font-medium tracking-[0.08em] text-muted-foreground uppercase", className)}
+      {...props}
+    />
+  )
+}
+
+function ComboboxEmpty({ className, ...props }: ComboboxPrimitive.Empty.Props) {
+  return (
+    <ComboboxPrimitive.Empty
+      data-slot="combobox-empty"
+      className={cn("p-0", className)}
+      {...props}
+    />
+  )
+}
+
+export {
+  Combobox,
+  ComboboxEmpty,
+  ComboboxGroup,
+  ComboboxGroupLabel,
+  ComboboxInput,
+  ComboboxItem,
+  ComboboxList,
+}
diff --git a/packages/ui/src/components/command-menu.tsx b/packages/ui/src/components/command-menu.tsx
new file mode 100644
index 0000000..3c937e3
--- /dev/null
+++ b/packages/ui/src/components/command-menu.tsx
@@ -0,0 +1,208 @@
+import * as React from "react"
+
+import {
+  Combobox,
+  ComboboxEmpty,
+  ComboboxGroup,
+  ComboboxGroupLabel,
+  ComboboxInput,
+  ComboboxItem,
+  ComboboxList,
+} from "@workspace/ui/components/combobox"
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogTitle,
+} from "@workspace/ui/components/dialog"
+import { Empty, EmptyDescription, EmptyHeader, EmptyTitle } from "@workspace/ui/components/empty"
+import { Kbd, KbdGroup } from "@workspace/ui/components/kbd"
+import { ScrollArea } from "@workspace/ui/components/scroll-area"
+import { cn } from "@workspace/ui/lib/utils"
+
+export type CommandMenuItem = {
+  id: string
+  label: string
+  description?: string
+  icon?: React.ReactNode
+  shortcut?: string | readonly string[]
+  disabled?: boolean
+  onSelect: () => void
+}
+
+export type CommandMenuGroup = {
+  id: string
+  label?: string
+  items: readonly CommandMenuItem[]
+}
+
+export type CommandMenuProps = {
+  open: boolean
+  onOpenChange: (open: boolean) => void
+  query: string
+  onQueryChange: (query: string) => void
+  groups: readonly CommandMenuGroup[]
+  triggerRef?: React.RefObject<HTMLElement | null>
+  title?: string
+  description?: string
+  placeholder?: string
+  emptyTitle?: string
+  emptyDescription?: string
+  className?: string
+}
+
+function ShortcutHint({ shortcut }: { shortcut: CommandMenuItem["shortcut"] }) {
+  if (!shortcut) return null
+
+  const keys = Array.isArray(shortcut) ? shortcut : [shortcut]
+
+  return (
+    <KbdGroup aria-label={`Shortcut ${keys.join(" ")}`}>
+      {keys.map((key) => (
+        <Kbd key={key}>{key}</Kbd>
+      ))}
+    </KbdGroup>
+  )
+}
+
+export function CommandMenu({
+  open,
+  onOpenChange,
+  query,
+  onQueryChange,
+  groups,
+  triggerRef,
+  title = "Command menu",
+  description = "Search for a command or destination.",
+  placeholder = "Search commands...",
+  emptyTitle = "No commands found",
+  emptyDescription = "Try a different search term.",
+  className,
+}: CommandMenuProps) {
+  const inputRef = React.useRef<HTMLInputElement>(null)
+  const normalizedQuery = query.trim().toLocaleLowerCase()
+  const filteredGroups = React.useMemo(() => {
+    if (!normalizedQuery) return groups
+
+    return groups
+      .map((group) => ({
+        ...group,
+        items: group.items.filter((item) =>
+          [item.label, item.description]
+            .filter(Boolean)
+            .some((value) => value!.toLocaleLowerCase().includes(normalizedQuery)),
+        ),
+      }))
+      .filter((group) => group.items.length > 0)
+  }, [groups, normalizedQuery])
+  const allItems = React.useMemo(
+    () => groups.flatMap((group) => group.items),
+    [groups],
+  )
+
+  const handleOpenChange = (nextOpen: boolean) => {
+    onOpenChange(nextOpen)
+    if (!nextOpen && query) {
+      onQueryChange("")
+    }
+  }
+
+  const handleItemSelect = (item: CommandMenuItem) => {
+    if (item.disabled) return
+    item.onSelect()
+    handleOpenChange(false)
+  }
+
+  let itemIndex = 0
+
+  return (
+    <Dialog open={open} onOpenChange={handleOpenChange}>
+      <DialogContent
+        className={cn("max-w-xl gap-0 overflow-hidden p-0", className)}
+        initialFocus={inputRef}
+        finalFocus={triggerRef ?? true}
+      >
+        <DialogTitle className="sr-only">{title}</DialogTitle>
+        <DialogDescription className="sr-only">{description}</DialogDescription>
+
+        <Combobox
+          inline
+          items={groups}
+          filteredItems={filteredGroups}
+          filter={null}
+          autoHighlight
+          inputValue={query}
+          onInputValueChange={(value) => onQueryChange(String(value))}
+          itemToStringLabel={(item: CommandMenuItem) => item.label}
+          value={null}
+          onValueChange={() => undefined}
+          inputRef={inputRef}
+        >
+          <div className="flex items-center border-b border-border px-1">
+            <ComboboxInput
+              aria-label="Search commands"
+              placeholder={placeholder}
+              className="flex-1"
+            />
+          </div>
+
+          <ScrollArea className="max-h-80">
+            <ComboboxList className="space-y-3 p-2">
+              {filteredGroups.map((group) => {
+                const groupItems = group.items.map((item) => {
+                  const currentIndex = itemIndex
+                  itemIndex += 1
+                  return { item, index: currentIndex }
+                })
+
+                return (
+                  <ComboboxGroup key={group.id}>
+                    {group.label && <ComboboxGroupLabel>{group.label}</ComboboxGroupLabel>}
+                    <div className="space-y-0.5">
+                      {groupItems.map(({ item, index }) => (
+                        <ComboboxItem
+                          key={item.id}
+                          value={item}
+                          index={index}
+                          disabled={item.disabled}
+                          onClick={() => handleItemSelect(item)}
+                        >
+                          {item.icon && (
+                            <span className="flex size-8 shrink-0 items-center justify-center rounded-md bg-muted text-muted-foreground [&_svg]:size-4">
+                              {item.icon}
+                            </span>
+                          )}
+                          <span className="min-w-0 flex-1">
+                            <span className="block truncate font-medium">{item.label}</span>
+                            {item.description && (
+                              <span className="block truncate text-xs text-muted-foreground">
+                                {item.description}
+                              </span>
+                            )}
+                          </span>
+                          <ShortcutHint shortcut={item.shortcut} />
+                        </ComboboxItem>
+                      ))}
+                    </div>
+                  </ComboboxGroup>
+                )
+              })}
+              <ComboboxEmpty>
+                <Empty className="py-10">
+                  <EmptyHeader>
+                    <EmptyTitle>{emptyTitle}</EmptyTitle>
+                    <EmptyDescription>
+                      {normalizedQuery ? emptyDescription : "No commands are available yet."}
+                    </EmptyDescription>
+                  </EmptyHeader>
+                </Empty>
+              </ComboboxEmpty>
+            </ComboboxList>
+          </ScrollArea>
+        </Combobox>
+      </DialogContent>
+    </Dialog>
+  )
+}
+
+export { ShortcutHint }
diff --git a/packages/ui/src/components/empty.tsx b/packages/ui/src/components/empty.tsx
new file mode 100644
index 0000000..de4b2e1
--- /dev/null
+++ b/packages/ui/src/components/empty.tsx
@@ -0,0 +1,33 @@
+import * as React from "react"
+
+import { cn } from "@workspace/ui/lib/utils"
+
+function Empty({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="empty"
+      className={cn("flex flex-col items-center justify-center gap-1 px-4 py-8 text-center", className)}
+      {...props}
+    />
+  )
+}
+
+function EmptyHeader({ className, ...props }: React.ComponentProps<"div">) {
+  return <div data-slot="empty-header" className={cn("flex flex-col gap-1", className)} {...props} />
+}
+
+function EmptyTitle({ className, ...props }: React.ComponentProps<"h3">) {
+  return <h3 data-slot="empty-title" className={cn("text-sm font-medium", className)} {...props} />
+}
+
+function EmptyDescription({ className, ...props }: React.ComponentProps<"p">) {
+  return (
+    <p
+      data-slot="empty-description"
+      className={cn("text-xs text-muted-foreground", className)}
+      {...props}
+    />
+  )
+}
+
+export { Empty, EmptyDescription, EmptyHeader, EmptyTitle }
diff --git a/packages/ui/src/components/kbd.tsx b/packages/ui/src/components/kbd.tsx
new file mode 100644
index 0000000..95f6134
--- /dev/null
+++ b/packages/ui/src/components/kbd.tsx
@@ -0,0 +1,28 @@
+import * as React from "react"
+
+import { cn } from "@workspace/ui/lib/utils"
+
+function Kbd({ className, ...props }: React.ComponentProps<"kbd">) {
+  return (
+    <kbd
+      data-slot="kbd"
+      className={cn(
+        "pointer-events-none inline-flex h-5 min-w-5 items-center justify-center rounded border border-border bg-muted px-1.5 font-mono text-[0.625rem] font-medium text-muted-foreground",
+        className,
+      )}
+      {...props}
+    />
+  )
+}
+
+function KbdGroup({ className, ...props }: React.ComponentProps<"span">) {
+  return (
+    <span
+      data-slot="kbd-group"
+      className={cn("inline-flex items-center gap-1", className)}
+      {...props}
+    />
+  )
+}
+
+export { Kbd, KbdGroup }
diff --git a/packages/ui/src/examples/command-menu-gallery.tsx b/packages/ui/src/examples/command-menu-gallery.tsx
new file mode 100644
index 0000000..ac1a041
--- /dev/null
+++ b/packages/ui/src/examples/command-menu-gallery.tsx
@@ -0,0 +1,80 @@
+import { useState } from "react"
+import { HugeiconsIcon } from "@hugeicons/react"
+import {
+  Home01Icon,
+  Search01Icon,
+  Settings01Icon,
+} from "@hugeicons/core-free-icons"
+
+import { Button } from "@workspace/ui/components/button"
+import { CommandMenu, type CommandMenuGroup } from "@workspace/ui/components/command-menu"
+import { Kbd } from "@workspace/ui/components/kbd"
+
+export function CommandMenuGallery() {
+  const [open, setOpen] = useState(false)
+  const [query, setQuery] = useState("")
+  const [lastAction, setLastAction] = useState("No command selected")
+
+  const groups: CommandMenuGroup[] = [
+    {
+      id: "navigation",
+      label: "Navigation",
+      items: [
+        {
+          id: "open-dashboard",
+          label: "Open dashboard",
+          description: "View account activity and positions",
+          icon: <HugeiconsIcon icon={Home01Icon} strokeWidth={2} />,
+          shortcut: ["⌘", "1"],
+          onSelect: () => setLastAction("Opened dashboard"),
+        },
+        {
+          id: "search-markets",
+          label: "Search markets",
+          description: "Find a market by name or symbol",
+          icon: <HugeiconsIcon icon={Search01Icon} strokeWidth={2} />,
+          shortcut: ["⌘", "K"],
+          onSelect: () => setLastAction("Started market search"),
+        },
+      ],
+    },
+    {
+      id: "preferences",
+      label: "Preferences",
+      items: [
+        {
+          id: "open-settings",
+          label: "Open settings",
+          description: "Manage application preferences",
+          icon: <HugeiconsIcon icon={Settings01Icon} strokeWidth={2} />,
+          shortcut: ["⌘", ","],
+          onSelect: () => setLastAction("Opened settings"),
+        },
+      ],
+    },
+  ]
+
+  return (
+    <section className="flex max-w-xl flex-col gap-3 rounded-xl border border-border bg-card p-6">
+      <div className="flex items-center justify-between gap-4">
+        <div>
+          <h2 className="font-heading text-sm font-medium">Command menu</h2>
+          <p className="text-xs text-muted-foreground">A keyboard-first command surface.</p>
+        </div>
+        <Button type="button" variant="outline" onClick={() => setOpen(true)}>
+          Open menu <Kbd>⌘ K</Kbd>
+        </Button>
+      </div>
+      <p aria-live="polite" className="text-xs text-muted-foreground">
+        {lastAction}
+      </p>
+      <CommandMenu
+        open={open}
+        onOpenChange={setOpen}
+        query={query}
+        onQueryChange={setQuery}
+        groups={groups}
+      />
+    </section>
+  )
+}