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.

​
Install the package

npm install cmdk

​
Peer dependencies

cmdk requires React and ReactDOM as peer dependencies. Both React 18 and React 19 (including release candidates) are supported.
PackageVersion
react^18 || ^19 || ^19.0.0-rc
react-dom^18 || ^19 || ^19.0.0-rc
If your project already has React installed, no additional action is needed.

​
Radix UI dependencies

cmdk uses several Radix UI primitives internally. These are listed as regular dependencies and are installed automatically when you install cmdk.
PackagePurpose
@radix-ui/react-dialogPowers Command.Dialog overlay
@radix-ui/react-compose-refsRef merging utility
@radix-ui/react-idStable ID generation
@radix-ui/react-primitiveBase primitive components
You do not need to install these packages separately.

​
Client component requirement

cmdk is a client component — it cannot be used in React Server Components. Add 'use client' to any component that imports cmdk.

​
Next.js App Router

In the Next.js App Router, all components are Server Components by default. Add the 'use client' directive at the top of any file that imports from cmdk. 
'use client'

import { Command } from 'cmdk'

export function CommandMenu() {
  return (
    <Command>
      <Command.Input />
      <Command.List>
        <Command.Item>Example</Command.Item>
      </Command.List>
    </Command>
  )
}
You can keep 'use client' scoped to a single wrapper component and import that component from your Server Components freely.

​
Vite / Create React App

In projects where all components are client components by default (Vite, Create React App, etc.), no extra configuration is needed. Import and use cmdk directly. 
import { Command } from 'cmdk'

export function CommandMenu() {
  return (
    <Command>
      <Command.Input />
      <Command.List>
        <Command.Item>Example</Command.Item>
      </Command.List>
    </Command>
  )
}