Skip to Content
FrontendBundlesComponentsUI PrimitivesCommand

Command

A keyboard-navigable command palette interface built on the cmdk library. Use for search, quick actions, or any filtered list.

Import

import {
  Command, CommandDialog, CommandInput, CommandList,
  CommandEmpty, CommandGroup, CommandItem,
  CommandShortcut, CommandSeparator,
} from "@phpcreation/frontend-components-react-nextjs-bundle/components/Command";

Sub-components

ComponentDescription
CommandRoot container
CommandDialogWraps Command in a Dialog — ready to use as a modal palette
CommandInputSearch input with magnifier icon
CommandListScrollable results container
CommandEmptyShown when no items match
CommandGroupGroups items with a heading
CommandItemSelectable result item
CommandShortcutKeyboard shortcut label (right-aligned)
CommandSeparatorVisual divider between groups

Usage

import {
  CommandDialog, CommandInput, CommandList,
  CommandEmpty, CommandGroup, CommandItem,
} from "...";
 
const [open, setOpen] = useState(false);
 
// Open with ⌘K
useEffect(() => {
  const down = (e: KeyboardEvent) => {
    if (e.key === "k" && (e.metaKey || e.ctrlKey)) {
      e.preventDefault();
      setOpen((v) => !v);
    }
  };
  document.addEventListener("keydown", down);
  return () => document.removeEventListener("keydown", down);
}, []);
 
<CommandDialog open={open} onOpenChange={setOpen}>
  <CommandInput placeholder="Search entities..." />
  <CommandList>
    <CommandEmpty>No results found.</CommandEmpty>
    <CommandGroup heading="Entities">
      <CommandItem onSelect={() => router.push("/invoices")}>
        Invoices
      </CommandItem>
      <CommandItem onSelect={() => router.push("/products")}>
        Products
      </CommandItem>
    </CommandGroup>
  </CommandList>
</CommandDialog>
Last updated on
Dropdown MenuBreadcrumb