Skip to main content

Documentation Index

Fetch the complete documentation index at: https://mintlify.com/dip/cmdk/llms.txt

Use this file to discover all available pages before exploring further.

cmdk is fully React Strict Mode safe. If you encounter any issues in Strict Mode, open an issue on GitHub.
1

Install cmdk

Add cmdk to your project using your package manager of choice.
npm install cmdk
2

Create a basic command menu

Import Command and compose the sub-components to build your menu. cmdk filters and sorts items automatically as the user types.
import { Command } from 'cmdk'

const CommandMenu = () => {
  return (
    <Command label="Command Menu">
      <Command.Input />
      <Command.List>
        <Command.Empty>No results found.</Command.Empty>

        <Command.Group heading="Letters">
          <Command.Item>a</Command.Item>
          <Command.Item>b</Command.Item>
          <Command.Separator />
          <Command.Item>c</Command.Item>
        </Command.Group>

        <Command.Item>Apple</Command.Item>
      </Command.List>
    </Command>
  )
}
  • Command is the root component and renders inline wherever you place it.
  • Command.Input is the search field. It controls filtering automatically.
  • Command.List contains all items and groups.
  • Command.Empty renders automatically when no items match the search query.
  • Command.Group groups items under a visible heading.
  • Command.Separator is hidden when the user is searching, visible when the query is empty.
3

Add dialog support

Use Command.Dialog to render the menu in an accessible overlay. Toggle it with a keyboard shortcut.
import { Command } from 'cmdk'

const CommandMenu = () => {
  const [open, setOpen] = React.useState(false)

  // Toggle the menu when ⌘K is pressed
  React.useEffect(() => {
    const down = (e) => {
      if (e.key === 'k' && (e.metaKey || e.ctrlKey)) {
        e.preventDefault()
        setOpen((open) => !open)
      }
    }

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

  return (
    <Command.Dialog open={open} onOpenChange={setOpen} label="Global Command Menu">
      <Command.Input />
      <Command.List>
        <Command.Empty>No results found.</Command.Empty>

        <Command.Group heading="Letters">
          <Command.Item>a</Command.Item>
          <Command.Item>b</Command.Item>
          <Command.Separator />
          <Command.Item>c</Command.Item>
        </Command.Group>

        <Command.Item>Apple</Command.Item>
      </Command.List>
    </Command.Dialog>
  )
}
Command.Dialog composes Radix UI’s Dialog component and renders an overlay. The open and onOpenChange props give you full control over when the menu is visible. cmdk does not listen for keyboard shortcuts automatically — you wire them up yourself so you have complete control over the keybind context.
4

Style it

cmdk ships with no default styles. Every element exposes a cmdk-* data attribute that you can target with plain CSS.
[cmdk-root] {
  /* root container */
}

[cmdk-input] {
  /* search input */
}

[cmdk-list] {
  min-height: 300px;
  height: var(--cmdk-list-height);
  max-height: 500px;
  transition: height 100ms ease;
}

[cmdk-item] {
  /* individual item */
}

[cmdk-item][data-selected='true'] {
  /* highlighted/selected item */
}

[cmdk-item][data-disabled='true'] {
  /* disabled item */
}

[cmdk-group-heading] {
  /* group label */
}

[cmdk-empty] {
  /* empty state */
}
The --cmdk-list-height CSS variable is updated automatically by Command.List and reflects the height of the current results. Use it to animate the list height smoothly as results change.For a complete reference of all available data attributes and styling patterns, see the styling guide.

Build docs developers (and LLMs) love

Get started for freeTalk to us