Haedong
025

Command

Navigation
Pages
Log
Work
About
Play
Actions
Toggle themeT
Copy install commandC

Nothing selected

Customize

Mode

Code

<Command aria-label="Command menu">
  <CommandInput placeholder="Type a command" />
  <CommandList>
    <CommandEmpty>No results</CommandEmpty>
    <CommandGroup heading="Pages">
      <CommandItem value="log" keywords={["home"]} onSelect={() => go("/")}>Log</CommandItem>
      …
    </CommandGroup>
    <CommandSeparator />
    <CommandGroup heading="Actions">
      <CommandItem value="theme">Toggle theme<CommandShortcut>T</CommandShortcut></CommandItem>
    </CommandGroup>
  </CommandList>
</Command>

Install

npx shadcn@latest add https://components.haedong.dev/r/command.json

Props

Combobox pattern: focus stays in CommandInput; arrows move the active option, Enter selects. Items filter themselves on value + keywords; groups hide when empty; CommandEmpty appears when nothing matches. CommandDialog mounts the palette in Dialog.

PropTypeDescription
Command.onSelect(value: string) => voidCalled after the item's own onSelect with the selected value.
CommandItem.valuestringIdentity and the text matched against the query. Required.
CommandItem.keywordsstring[]Extra terms the query may match.
CommandItem.onSelect() => voidCalled on click or Enter while active.
CommandGroup.headingstringMuted heading; the group hides when all its items are filtered out.
CommandDialogDialogProps & { onSelect }Dialog + Command in one; bind ⌘K yourself and pass open / onOpenChange.