Components

Command

Palette-style search and action list. Built on cmdk. Keyboard-first — every entry should map to something the operator can do.

When to usewhen the surface is a searchable action list — the app palette, a picker inside a Popover (Combobox), or a global ⌘K.

Import

import {
  Command, CommandInput, CommandList, CommandEmpty,
  CommandGroup, CommandItem, CommandSeparator, CommandShortcut
} from "@ravnhq/efni/command"

Standalone palette

<Command>
  <CommandInput placeholder="Search commands…" />
  <CommandList>
    <CommandEmpty>No results.</CommandEmpty>
    <CommandGroup heading="Missions">
      <CommandItem>
        <Icon icon={Plus} />
        <span>New mission</span>
        <CommandShortcut>⌘N</CommandShortcut>
      </CommandItem>
    </CommandGroup>
    <CommandSeparator />
    <CommandGroup heading="Account">…</CommandGroup>
  </CommandList>
</Command>

Accessibility

Key	Action
`ArrowUp / ArrowDown`	Move through the list, skipping headings.
`Enter`	Run the focused command.
`Escape`	Clear the input, then close (if inside a Popover).

The input auto-focuses on mount — no manual focus management needed.
cmdk filters and reorders items by score; the DOM order is not the render order.

Guidelines

Group commands by object (Missions, Account) so scanning matches the operator's mental model.
Show a shortcut on the right for anything reachable another way — teaches the shortcut over time.
Provide a distinct CommandEmpty state — silence looks like a bug.

Don't

Don't put more than ~8 items in a single group without a separator.
Don't include commands that require additional arguments unless the palette collects them next step.
Don't reach for Command when the user picks from data — that's Combobox.

Props

Prop	Type	Default	Description
`value`	`string`	—	Optional controlled state of the selected command menu item.
`onValueChange`	`(value: string) => void`	—	Event handler called when the selected item of the menu changes.
`CommandInput.value`	`string`	—	Optional controlled state for the value of the search input.
`CommandInput.onValueChange`	`(search: string) => void`	—	Event handler called when the search value changes.
`CommandItem.value`	`string`	—	A unique value for this item.
`CommandItem.onSelect`	`(value: string) => void`	—	Event handler for when this item is selected, either via click or keyboard selection.
`CommandItem.disabled`	`boolean`	—	Whether this item is currently disabled.
`CommandGroup.heading`	`React.ReactNode`	—	Optional heading to render for this group.
`…props`	`React.ComponentProps<typeof CommandPrimitive>`	—	Everything Command passes to the element it renders.