Fast Unstyled Command Menu Component For React – cmdk

Description:

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

Basic usage:

1. Install and import the cmdk.

# NPM
$ npm i cmdk

import { Command } from 'cmdk'

2. Create a basic command menu.

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>x</Command.Item>
        // ...
      </Command.List>
    </Command>
  )
}

3. Or display the command menu in a dialog popup.

const CommandMenu = () => {
  const [open, setOpen] = React.useState(false)
  React.useEffect(() => {
    const down = (e) => {
      if (e.key === 'k' && e.metaKey) {
        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>x</Command.Item>
      </Command.List>
    </Command.Dialog>
  )
}

Preview: