Use inside a Popover

For an inline command palette that opens relative to a trigger button, embed Command inside a Radix UI Popover. Because cmdk already depends on Radix UI Dialog internally, adding the Popover primitive adds minimal bundle weight.

Installation

pnpm add @radix-ui/react-popover

Basic example

Render Command directly inside Popover.Content. Do not use Command.Dialog here — that opens a full-screen modal, not a popover:

import * as Popover from '@radix-ui/react-popover'
import { Command } from 'cmdk'

function CommandPopover() {
  return (
    <Popover.Root>
      <Popover.Trigger asChild>
        <button>Open command menu</button>
      </Popover.Trigger>

      <Popover.Content>
        <Command>
          <Command.Input placeholder="Search…" />
          <Command.List>
            <Command.Empty>No results found.</Command.Empty>
            <Command.Item>Apple</Command.Item>
            <Command.Item>Banana</Command.Item>
            <Command.Item>Cherry</Command.Item>
          </Command.List>
        </Command>
      </Popover.Content>
    </Popover.Root>
  )
}

Do not nest Command.Dialog inside Popover.Content. Command.Dialog renders its own Radix Dialog portal and overlay, which conflicts with the Popover’s positioning and focus management. Use Command directly.

Controlled open state

Control the popover programmatically to open it via a keyboard shortcut or other trigger:

import * as Popover from '@radix-ui/react-popover'
import { Command } from 'cmdk'

function CommandPopover() {
  const [open, setOpen] = React.useState(false)

  React.useEffect(() => {
    const down = (e: KeyboardEvent) => {
      if (e.key === 'k' && (e.metaKey || e.ctrlKey)) {
        e.preventDefault()
        setOpen((open) => !open)
      }
    }

    document.addEventListener('keydown', down)
    return () => document.removeEventListener('keydown', down)
  }, [])

  return (
    <Popover.Root open={open} onOpenChange={setOpen}>
      <Popover.Trigger asChild>
        <button>
          Search <kbd>⌘K</kbd>
        </button>
      </Popover.Trigger>

      <Popover.Content align="start" sideOffset={4}>
        <Command>
          <Command.Input placeholder="Search…" />
          <Command.List>
            <Command.Empty>No results found.</Command.Empty>
            <Command.Group heading="Actions">
              <Command.Item onSelect={() => setOpen(false)}>
                Open settings
              </Command.Item>
              <Command.Item onSelect={() => setOpen(false)}>
                Create new project
              </Command.Item>
            </Command.Group>
          </Command.List>
        </Command>
      </Popover.Content>
    </Popover.Root>
  )
}

Call setOpen(false) inside onSelect handlers to close the popover after the user picks an item.

Target [cmdk-root] inside your popover content selector, or scope your styles to the Popover.Content wrapper:

/* Scoped to your popover */
.my-popover [cmdk-root] {
  width: 320px;
  border: 1px solid var(--gray6);
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.12);
}

.my-popover [cmdk-list] {
  max-height: 300px;
  overflow: auto;
}

⌘I

Get Started

Components

Guides

Examples

Use inside a Popover

Installation

Basic example

Controlled open state

Styling the popover content

​Installation

​Basic example

​Controlled open state

​Styling the popover content

Installation

Basic example

Controlled open state

Styling the popover content