diff --git a/apps/design-system/content/docs/components/commandmenu.mdx b/apps/design-system/content/docs/components/commandmenu.mdx
index 64e43794377..e4fdd9801df 100644
--- a/apps/design-system/content/docs/components/commandmenu.mdx
+++ b/apps/design-system/content/docs/components/commandmenu.mdx
@@ -15,9 +15,9 @@ import {
   CommandInput,
   CommandList,
   CommandMenu,
+  CommandMenuTrigger as CommandMenuTriggerPrimitive,
   CommandProvider,
   useRegisterCommands,
-  useSetCommandMenuOpen,
 } from 'ui-patterns/CommandMenu'
 ```
 
@@ -42,17 +42,18 @@ function Commands() {
 }
 
 function CommandMenuTrigger() {
-  const setOpen = useSetCommandMenuOpen()
-
-  return <Button onClick={() => setOpen(true)}>Open command menu</Button>
+  return (
+    <CommandMenuTriggerPrimitive>
+      <Button>Open command menu</Button>
+    </CommandMenuTriggerPrimitive>
+  )
 }
 
-export function CommandMenuDemo() {
+export default function CommandMenuDemo() {
   return (
     <CommandProvider openKey="j">
-      <CommandMenuTrigger />
       <Commands />
-      <CommandMenu>
+      <CommandMenu trigger={<CommandMenuTrigger />}>
         <CommandInput />
         <CommandList />
       </CommandMenu>
diff --git a/apps/design-system/registry/default/example/commandmenu-conditional.tsx b/apps/design-system/registry/default/example/commandmenu-conditional.tsx
index 051f2904ae0..4d8159b3573 100644
--- a/apps/design-system/registry/default/example/commandmenu-conditional.tsx
+++ b/apps/design-system/registry/default/example/commandmenu-conditional.tsx
@@ -4,9 +4,9 @@ import {
   CommandInput,
   CommandList,
   CommandMenu,
+  CommandMenuTrigger as CommandMenuTriggerPrimitive,
   CommandProvider,
   useRegisterCommands,
-  useSetCommandMenuOpen,
 } from 'ui-patterns/CommandMenu'
 
 function Commands() {
@@ -48,22 +48,23 @@ function Commands() {
 }
 
 function CommandMenuTrigger() {
-  const setOpen = useSetCommandMenuOpen()
-
-  return <Button onClick={() => setOpen(true)}>Open command menu</Button>
+  return (
+    <CommandMenuTriggerPrimitive>
+      <Button>Open command menu</Button>
+    </CommandMenuTriggerPrimitive>
+  )
 }
 
 export default function CommandMenuDemo() {
   return (
-    <CommandProvider openKey="j">
+    <CommandProvider openKey="">
       <div className="flex flex-col gap-2">
-        <CommandMenuTrigger />
+        <CommandMenu trigger={<CommandMenuTrigger />}>
+          <CommandInput />
+          <CommandList />
+        </CommandMenu>
         <Commands />
       </div>
-      <CommandMenu>
-        <CommandInput />
-        <CommandList />
-      </CommandMenu>
     </CommandProvider>
   )
 }
diff --git a/apps/design-system/registry/default/example/commandmenu-demo.tsx b/apps/design-system/registry/default/example/commandmenu-demo.tsx
index 9cc8fb9bbb2..a1cfec496cd 100644
--- a/apps/design-system/registry/default/example/commandmenu-demo.tsx
+++ b/apps/design-system/registry/default/example/commandmenu-demo.tsx
@@ -3,9 +3,9 @@ import {
   CommandInput,
   CommandList,
   CommandMenu,
+  CommandMenuTrigger as CommandMenuTriggerPrimitive,
   CommandProvider,
   useRegisterCommands,
-  useSetCommandMenuOpen,
 } from 'ui-patterns/CommandMenu'
 
 function Commands() {
@@ -28,17 +28,18 @@ function Commands() {
 }
 
 function CommandMenuTrigger() {
-  const setOpen = useSetCommandMenuOpen()
-
-  return <Button onClick={() => setOpen(true)}>Open command menu</Button>
+  return (
+    <CommandMenuTriggerPrimitive>
+      <Button>Open command menu</Button>
+    </CommandMenuTriggerPrimitive>
+  )
 }
 
 export default function CommandMenuDemo() {
   return (
     <CommandProvider openKey="j">
-      <CommandMenuTrigger />
       <Commands />
-      <CommandMenu>
+      <CommandMenu trigger={<CommandMenuTrigger />}>
         <CommandInput />
         <CommandList />
       </CommandMenu>
diff --git a/apps/design-system/registry/default/example/commandmenu-force.tsx b/apps/design-system/registry/default/example/commandmenu-force.tsx
index 0be2a80926a..ac475beb238 100644
--- a/apps/design-system/registry/default/example/commandmenu-force.tsx
+++ b/apps/design-system/registry/default/example/commandmenu-force.tsx
@@ -3,9 +3,9 @@ import {
   CommandInput,
   CommandList,
   CommandMenu,
+  CommandMenuTrigger as CommandMenuTriggerPrimitive,
   CommandProvider,
   useRegisterCommands,
-  useSetCommandMenuOpen,
 } from 'ui-patterns/CommandMenu'
 
 function Commands() {
@@ -40,17 +40,18 @@ function Commands() {
 }
 
 function CommandMenuTrigger() {
-  const setOpen = useSetCommandMenuOpen()
-
-  return <Button onClick={() => setOpen(true)}>Open command menu</Button>
+  return (
+    <CommandMenuTriggerPrimitive>
+      <Button>Open command menu</Button>
+    </CommandMenuTriggerPrimitive>
+  )
 }
 
 export default function CommandMenuDemo() {
   return (
     <CommandProvider openKey="">
-      <CommandMenuTrigger />
       <Commands />
-      <CommandMenu>
+      <CommandMenu trigger={<CommandMenuTrigger />}>
         <CommandInput />
         <CommandList />
       </CommandMenu>
diff --git a/apps/design-system/registry/default/example/commandmenu-hidden.tsx b/apps/design-system/registry/default/example/commandmenu-hidden.tsx
index 76b204584b8..a9d60c69025 100644
--- a/apps/design-system/registry/default/example/commandmenu-hidden.tsx
+++ b/apps/design-system/registry/default/example/commandmenu-hidden.tsx
@@ -3,9 +3,9 @@ import {
   CommandInput,
   CommandList,
   CommandMenu,
+  CommandMenuTrigger as CommandMenuTriggerPrimitive,
   CommandProvider,
   useRegisterCommands,
-  useSetCommandMenuOpen,
 } from 'ui-patterns/CommandMenu'
 
 function Commands() {
@@ -27,17 +27,18 @@ function Commands() {
 }
 
 function CommandMenuTrigger() {
-  const setOpen = useSetCommandMenuOpen()
-
-  return <Button onClick={() => setOpen(true)}>Open command menu</Button>
+  return (
+    <CommandMenuTriggerPrimitive>
+      <Button>Open command menu</Button>
+    </CommandMenuTriggerPrimitive>
+  )
 }
 
 export default function CommandMenuDemo() {
   return (
     <CommandProvider openKey="">
-      <CommandMenuTrigger />
       <Commands />
-      <CommandMenu>
+      <CommandMenu trigger={<CommandMenuTrigger />}>
         <CommandInput />
         <CommandList />
       </CommandMenu>
diff --git a/apps/design-system/registry/default/example/commandmenu-icon.tsx b/apps/design-system/registry/default/example/commandmenu-icon.tsx
index 8b0c0cbf395..c877f83e450 100644
--- a/apps/design-system/registry/default/example/commandmenu-icon.tsx
+++ b/apps/design-system/registry/default/example/commandmenu-icon.tsx
@@ -4,9 +4,9 @@ import {
   CommandInput,
   CommandList,
   CommandMenu,
+  CommandMenuTrigger as CommandMenuTriggerPrimitive,
   CommandProvider,
   useRegisterCommands,
-  useSetCommandMenuOpen,
 } from 'ui-patterns/CommandMenu'
 
 function Commands() {
@@ -23,17 +23,18 @@ function Commands() {
 }
 
 function CommandMenuTrigger() {
-  const setOpen = useSetCommandMenuOpen()
-
-  return <Button onClick={() => setOpen(true)}>Open command menu</Button>
+  return (
+    <CommandMenuTriggerPrimitive>
+      <Button>Open command menu</Button>
+    </CommandMenuTriggerPrimitive>
+  )
 }
 
 export default function CommandMenuDemo() {
   return (
     <CommandProvider openKey="">
-      <CommandMenuTrigger />
       <Commands />
-      <CommandMenu>
+      <CommandMenu trigger={<CommandMenuTrigger />}>
         <CommandInput />
         <CommandList />
       </CommandMenu>
diff --git a/apps/design-system/registry/default/example/commandmenu-subpage-custom.tsx b/apps/design-system/registry/default/example/commandmenu-subpage-custom.tsx
index d4dcdf3ec6b..0cd74c1d7a1 100644
--- a/apps/design-system/registry/default/example/commandmenu-subpage-custom.tsx
+++ b/apps/design-system/registry/default/example/commandmenu-subpage-custom.tsx
@@ -5,11 +5,11 @@ import {
   CommandInput,
   CommandList,
   CommandMenu,
+  CommandMenuTrigger as CommandMenuTriggerPrimitive,
   CommandProvider,
   PageType,
   useRegisterCommands,
   useRegisterPage,
-  useSetCommandMenuOpen,
   useSetPage,
 } from 'ui-patterns/CommandMenu'
 
@@ -45,17 +45,18 @@ function Commands() {
 }
 
 function CommandMenuTrigger() {
-  const setOpen = useSetCommandMenuOpen()
-
-  return <Button onClick={() => setOpen(true)}>Open command menu</Button>
+  return (
+    <CommandMenuTriggerPrimitive>
+      <Button>Open command menu</Button>
+    </CommandMenuTriggerPrimitive>
+  )
 }
 
 export default function CommandMenuDemo() {
   return (
     <CommandProvider openKey="">
-      <CommandMenuTrigger />
       <Commands />
-      <CommandMenu>
+      <CommandMenu trigger={<CommandMenuTrigger />}>
         <CommandInput />
         <CommandList />
       </CommandMenu>
diff --git a/apps/design-system/registry/default/example/commandmenu-subpage.tsx b/apps/design-system/registry/default/example/commandmenu-subpage.tsx
index 7f3ee57187f..ef842b43143 100644
--- a/apps/design-system/registry/default/example/commandmenu-subpage.tsx
+++ b/apps/design-system/registry/default/example/commandmenu-subpage.tsx
@@ -4,11 +4,11 @@ import {
   CommandInput,
   CommandList,
   CommandMenu,
+  CommandMenuTrigger as CommandMenuTriggerPrimitive,
   CommandProvider,
   PageType,
   useRegisterCommands,
   useRegisterPage,
-  useSetCommandMenuOpen,
   useSetPage,
 } from 'ui-patterns/CommandMenu'
 
@@ -53,17 +53,18 @@ function Commands() {
 }
 
 function CommandMenuTrigger() {
-  const setOpen = useSetCommandMenuOpen()
-
-  return <Button onClick={() => setOpen(true)}>Open command menu</Button>
+  return (
+    <CommandMenuTriggerPrimitive>
+      <Button>Open command menu</Button>
+    </CommandMenuTriggerPrimitive>
+  )
 }
 
 export default function CommandMenuDemo() {
   return (
     <CommandProvider openKey="">
-      <CommandMenuTrigger />
       <Commands />
-      <CommandMenu>
+      <CommandMenu trigger={<CommandMenuTrigger />}>
         <CommandInput />
         <CommandList />
       </CommandMenu>
diff --git a/packages/ui-patterns/CommandMenu/api/CommandMenu.tsx b/packages/ui-patterns/CommandMenu/api/CommandMenu.tsx
index 7364a49a207..822200e1d45 100644
--- a/packages/ui-patterns/CommandMenu/api/CommandMenu.tsx
+++ b/packages/ui-patterns/CommandMenu/api/CommandMenu.tsx
@@ -1,10 +1,10 @@
 'use client'
 
 import { AlertTriangle, ArrowLeft } from 'lucide-react'
-import { type PropsWithChildren, forwardRef } from 'react'
+import { type PropsWithChildren, type ReactNode, forwardRef, memo } from 'react'
 import { ErrorBoundary } from 'react-error-boundary'
 
-import { Button, Command_Shadcn_, Dialog, DialogContent, cn } from 'ui'
+import { Button, Command_Shadcn_, Dialog, DialogContent, DialogTrigger, cn } from 'ui'
 
 import { useCurrentPage, usePageComponent, usePopPage } from './hooks/pagesHooks'
 import { useQuery, useSetQuery } from './hooks/queryHooks'
@@ -82,7 +82,13 @@ function PageSwitch({ children }: PropsWithChildren) {
   return PageComponent ? <PageComponent /> : <CommandWrapper>{children}</CommandWrapper>
 }
 
-function CommandMenu({ children }: PropsWithChildren) {
+interface CommandMenuProps extends PropsWithChildren {
+  trigger?: ReactNode
+}
+
+const CommandMenuTrigger = memo(DialogTrigger)
+
+function CommandMenu({ children, trigger }: CommandMenuProps) {
   const open = useCommandMenuOpen()
   const setOpen = useSetCommandMenuOpen()
 
@@ -96,6 +102,7 @@ function CommandMenu({ children }: PropsWithChildren) {
 
   return (
     <Dialog open={open} onOpenChange={setOpen}>
+      {trigger}
       <DialogContent
         hideClose
         onInteractOutside={() => setOpen(false)}
@@ -114,4 +121,4 @@ function CommandMenu({ children }: PropsWithChildren) {
   )
 }
 
-export { Breadcrumb, CommandMenu, CommandWrapper }
+export { Breadcrumb, CommandMenu, CommandMenuTrigger, CommandWrapper }
diff --git a/packages/ui-patterns/CommandMenu/index.tsx b/packages/ui-patterns/CommandMenu/index.tsx
index fe21f404b7d..d3653d6baf3 100644
--- a/packages/ui-patterns/CommandMenu/index.tsx
+++ b/packages/ui-patterns/CommandMenu/index.tsx
@@ -1,7 +1,7 @@
 export * from './api/Badges'
 export { CommandInput } from './api/CommandInput'
 export { CommandList } from './api/CommandList'
-export { Breadcrumb, CommandMenu, CommandWrapper } from './api/CommandMenu'
+export { Breadcrumb, CommandMenu, CommandMenuTrigger, CommandWrapper } from './api/CommandMenu'
 export { CommandProvider } from './api/CommandProvider'
 export { TextHighlighter, TextHighlighterBase } from './api/TextHighlighter'
 export * from './api/hooks/commandsHooks'