CommandPalette

A searchable, keyboard-first command/navigation overlay, built on cmdk — no accessible Radix primitive exists for this pattern (the same situation as Combobox).

function Demo() {
const [open, setOpen] = useState(false);
return (
  <>
    <Button onClick={() => setOpen(true)}>Open command palette</Button>
    <CommandPalette open={open} onOpenChange={setOpen} label="Command menu">
      <CommandInput placeholder="Type a command or search…" />
      <CommandList>
        <CommandEmpty>No results found.</CommandEmpty>
        <CommandGroup heading="Pages">
          <CommandItem onSelect={() => setOpen(false)}>Overview</CommandItem>
          <CommandItem onSelect={() => setOpen(false)}>Members</CommandItem>
          <CommandItem onSelect={() => setOpen(false)}>Billing</CommandItem>
        </CommandGroup>
        <CommandSeparator />
        <CommandGroup heading="Actions">
          <CommandItem onSelect={() => setOpen(false)}>
            Invite member
            <CommandShortcut>⌘I</CommandShortcut>
          </CommandItem>
        </CommandGroup>
      </CommandList>
    </CommandPalette>
  </>
);
}
render(<Demo />);

Editable — change the code above and the preview updates live.

With a global keyboard shortcut

Pass shortcut="k" to make Cmd/Ctrl+K toggle the palette from anywhere on the page — the standard "⌘K" pattern.

<CommandPalette open={open} onOpenChange={setOpen} shortcut="k">
  {/* ... */}
</CommandPalette>

Installation

import {
  CommandPalette, CommandInput, CommandList, CommandEmpty,
  CommandGroup, CommandItem, CommandSeparator, CommandShortcut,
} from "@labanaat/ui/command-palette";

Props

Prop	Type	Default	Description
open / defaultOpen	boolean	—	Controlled / uncontrolled open state
onOpenChange	(open) => void	—	Change handler
shortcut	string	—	Key that, combined with Cmd/Ctrl, toggles the palette — e.g. "k"
label	string	"Command palette"	Accessible name for the dialog