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.

​
What is cmdk?

cmdk is a command menu React component that can also be used as an accessible combobox. You render items, it filters and sorts them automatically. cmdk supports a fully composable API, so you can wrap items in other components or even as static JSX. 
import { Command } from 'cmdk'

const CommandMenu = () => {
  return (
    <Command label="Command Menu">
      <Command.Input placeholder="Type a command or search..." />
      <Command.List>
        <Command.Empty>No results found.</Command.Empty>

        <Command.Group heading="Navigation">
          <Command.Item onSelect={() => router.push('/home')}>Home</Command.Item>
          <Command.Item onSelect={() => router.push('/settings')}>Settings</Command.Item>
        </Command.Group>

        <Command.Group heading="Actions">
          <Command.Item onSelect={() => createNew()}>Create new item</Command.Item>
        </Command.Group>
      </Command.List>
    </Command>
  )
}

Installation

Install cmdk with your package manager of choice and add it to your React project.

Quickstart

Build your first command menu in minutes with a complete working example.

Components

Explore the full component API — Command, Input, List, Item, Group, Dialog, and more.

Styling guide

Learn how to style cmdk using CSS data-attributes and custom stylesheets.

​
Key features

Composable API

Render any JSX as items — wrap them in your own components, use static markup, or mix both. No render props or data arrays needed.

Automatic filtering

Built-in fuzzy search with command-score ranks items as you type. Or bring your own filter function with full keyword support.

Fully accessible

Full ARIA combobox implementation tested with VoiceOver. Dialog mode wraps Radix UI’s accessible Dialog component.

Unstyled by design

Zero default styles. Target components with CSS data- attributes like [cmdk-item], [cmdk-input], and [cmdk-group].

React 18+

Built with useSyncExternalStore and useId. Safe with React 18, React 19, and React Strict Mode.

Keyboard navigation

Arrow keys, Home/End, Enter to select. Optional vim bindings (Ctrl+n/p/j/k) and loop-around navigation.

​
Example themes

The cmdk website showcases several styled themes you can use as a starting point:

Vercel

Clean, dark theme inspired by the Vercel command menu.

Linear

Sleek, minimal theme inspired by Linear’s command palette.

Raycast

Feature-rich theme inspired by the Raycast launcher.

Framer

Smooth, animated theme inspired by Framer’s command menu.

Build docs developers (and LLMs) love

Get started for freeTalk to us