> ## 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

> Fast, unstyled command menu React component

## 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.

```tsx theme={null}
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>
  )
}
```

<CardGroup cols={2}>
  <Card title="Installation" icon="download" href="/installation">
    Install cmdk with your package manager of choice and add it to your React project.
  </Card>

  <Card title="Quickstart" icon="rocket" href="/quickstart">
    Build your first command menu in minutes with a complete working example.
  </Card>

  <Card title="Components" icon="puzzle-piece" href="/components/command">
    Explore the full component API — Command, Input, List, Item, Group, Dialog, and more.
  </Card>

  <Card title="Styling guide" icon="paintbrush" href="/guides/styling">
    Learn how to style cmdk using CSS data-attributes and custom stylesheets.
  </Card>
</CardGroup>

## Key features

<CardGroup cols={2}>
  <Card title="Composable API" icon="layer-group">
    Render any JSX as items — wrap them in your own components, use static markup, or mix both. No render props or data arrays needed.
  </Card>

  <Card title="Automatic filtering" icon="magnifying-glass">
    Built-in fuzzy search with `command-score` ranks items as you type. Or bring your own filter function with full keyword support.
  </Card>

  <Card title="Fully accessible" icon="universal-access">
    Full ARIA combobox implementation tested with VoiceOver. Dialog mode wraps Radix UI's accessible Dialog component.
  </Card>

  <Card title="Unstyled by design" icon="paintbrush">
    Zero default styles. Target components with CSS `data-` attributes like `[cmdk-item]`, `[cmdk-input]`, and `[cmdk-group]`.
  </Card>

  <Card title="React 18+" icon="atom">
    Built with `useSyncExternalStore` and `useId`. Safe with React 18, React 19, and React Strict Mode.
  </Card>

  <Card title="Keyboard navigation" icon="keyboard">
    Arrow keys, Home/End, Enter to select. Optional vim bindings (`Ctrl+n/p/j/k`) and loop-around navigation.
  </Card>
</CardGroup>

## Example themes

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

<CardGroup cols={2}>
  <Card title="Vercel" icon="triangle" href="/examples/vercel">
    Clean, dark theme inspired by the Vercel command menu.
  </Card>

  <Card title="Linear" icon="circle-dot" href="/examples/linear">
    Sleek, minimal theme inspired by Linear's command palette.
  </Card>

  <Card title="Raycast" icon="bolt" href="/examples/raycast">
    Feature-rich theme inspired by the Raycast launcher.
  </Card>

  <Card title="Framer" icon="frame" href="/examples/framer">
    Smooth, animated theme inspired by Framer's command menu.
  </Card>
</CardGroup>


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.