CommandPalette

⌘K command surface on our Dialog — self-filtering items, arrow-key navigation, groups, shortcuts, empty state. Bind it globally with useHotkeys.

Try it — press ⌘K anywhere on this page

Usage

const [open, setOpen] = useState(false);
useHotkeys("mod+k", () => setOpen((o) => !o));

<CommandPalette open={open} onOpenChange={setOpen}>
  <CommandPaletteInput placeholder="Search…" />
  <CommandPaletteList>
    <CommandPaletteGroup label="Project">
      <CommandPaletteItem onSelect={deploy} keywords={["ship"]}
        shortcut={<Kbd>⇧D</Kbd>}>
        Deploy to production
      </CommandPaletteItem>
    </CommandPaletteGroup>
  </CommandPaletteList>
  <CommandPaletteEmpty>No matching commands.</CommandPaletteEmpty>
</CommandPalette>