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

# Quickstart

> Build your first command menu with cmdk in four steps.

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

<Steps>
  <Step title="Install cmdk">
    Add cmdk to your project using your package manager of choice.

    ```bash theme={null}
    npm install cmdk
    ```
  </Step>

  <Step title="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.

    ```tsx theme={null}
    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.
  </Step>

  <Step title="Add dialog support">
    Use `Command.Dialog` to render the menu in an accessible overlay. Toggle it with a keyboard shortcut.

    ```tsx theme={null}
    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.
  </Step>

  <Step title="Style it">
    cmdk ships with no default styles. Every element exposes a `cmdk-*` data attribute that you can target with plain CSS.

    ```css theme={null}
    [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](/guides/styling).
  </Step>
</Steps>


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