Docs
Command

Command

Command component is a fast, composable, and unstyled command menu designed for React. It provides a versatile and efficient way to create command menus in React applications. The component's flexibility allows developers to compose and customize the menu to fit the specific needs of their application. Whether creating context menus, dropdowns, or any scenario requiring a command-based interface, the Command component streamlines the process with speed and simplicity.

NPM

About

The <Command /> component uses the cmdk component by pacocoursey.

Installation

yarn add @camped-ui/command

Usage

import {
  Command,
  CommandDialog,
  CommandEmpty,
  CommandGroup,
  CommandInput,
  CommandItem,
  CommandList,
  CommandSeparator,
  CommandShortcut,
} from "@camped-ui/command";
<Command>
  <CommandInput placeholder="Type a command or search..." />
  <CommandList>
    <CommandEmpty>No results found.</CommandEmpty>
    <CommandGroup heading="Suggestions">
      <CommandItem>Calendar</CommandItem>
      <CommandItem>Search Emoji</CommandItem>
      <CommandItem>Calculator</CommandItem>
    </CommandGroup>
    <CommandSeparator />
    <CommandGroup heading="Settings">
      <CommandItem>Profile</CommandItem>
      <CommandItem>Billing</CommandItem>
      <CommandItem>Settings</CommandItem>
    </CommandGroup>
  </CommandList>
</Command>

Examples

Dialog

Press ⌘J

To show the command menu in a dialog, use the <CommandDialog /> component.

export function CommandMenu() {
  const [open, setOpen] = React.useState(false);
 
  React.useEffect(() => {
    const down = (e: KeyboardEvent) => {
      if (e.key === "k" && (e.metaKey || e.ctrlKey)) {
        e.preventDefault();
        setOpen((open) => !open);
      }
    };
    document.addEventListener("keydown", down);
    return () => document.removeEventListener("keydown", down);
  }, []);
 
  return (
    <CommandDialog open={open} onOpenChange={setOpen}>
      <CommandInput placeholder="Type a command or search..." />
      <CommandList>
        <CommandEmpty>No results found.</CommandEmpty>
        <CommandGroup heading="Suggestions">
          <CommandItem>Calendar</CommandItem>
          <CommandItem>Search Emoji</CommandItem>
          <CommandItem>Calculator</CommandItem>
        </CommandGroup>
      </CommandList>
    </CommandDialog>
  );
}

Combobox

You can use the <Command /> component as a combobox. See the Combobox page for more information.

CollapsibleContext Menu