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 a command menu React component that can also be used as an accessible combobox. You render items and it filters and sorts them automatically. cmdk supports a fully composable API, so you can wrap items in other components or render them as static JSX.

Composable

Wrap items in your own components. Mix static JSX with dynamic lists. No render props or data arrays required.

Automatic filtering

Items are filtered and sorted in real time as the user types. Bring your own filter function or disable filtering entirely.

Accessible

Labeling, ARIA attributes, and DOM ordering tested with VoiceOver and Chrome DevTools. Dialog mode composes an accessible Radix UI Dialog.

Unstyled

No default styles. Every element exposes a cmdk-* data attribute for you to target with plain CSS.

Dialog support

Command.Dialog renders the menu in a Radix UI Dialog overlay. Toggle it with any keybind you choose.

React 18 + 19

Built on React 18 hooks (useId, useSyncExternalStore). Fully compatible with React 19 and Strict Mode.

​
Basic usage

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>
  )
}
cmdk requires React 18 or later. It uses useId and useSyncExternalStore, which are only available in React 18+.

​
Next steps

Installation

Install cmdk and its peer dependencies.

Quickstart

Build your first command menu in minutes.