Command

Searchable command menu for quick navigation — filters, keyboard selection, and a centered panel.

Examples

Overview

Command builds on Dialog for focus trap and dismiss behavior. Style matches a site search palette: soft backdrop, tall surface, filter pills, and large result rows. Wire query and filter state in your app (or use ⌘K / Ctrl+K as in the example).

tsx

import {
  Command,
  CommandTrigger,
  CommandPortal,
  CommandBackdrop,
  CommandPopup,
  CommandDialogTitle,
  CommandToolbar,
  CommandInput,
  CommandActions,
  CommandClose,
  CommandContent,
  CommandFilters,
  CommandFilter,
  CommandList,
  CommandItem,
  CommandEmpty,
} from "@standard-ui/react"

<Command>
  <CommandTrigger>Search…</CommandTrigger>
  <CommandPortal>
    <CommandBackdrop />
    <CommandPopup>
      <CommandDialogTitle>Search</CommandDialogTitle>
      <CommandToolbar>
        <CommandInput placeholder="Search…" />
        <CommandActions>
          <CommandClose />
        </CommandActions>
      </CommandToolbar>
      <CommandContent>
        <CommandFilters>
          <CommandFilter selected>All</CommandFilter>
        </CommandFilters>
        <CommandList>
          <CommandItem>Open settings</CommandItem>
        </CommandList>
      </CommandContent>
    </CommandPopup>
  </CommandPortal>
</Command>

Usage

Anatomy

tsx

Command
  CommandTrigger
  CommandPortal
    CommandBackdrop
    CommandPopup
      CommandDialogTitle
      CommandToolbar
        CommandInput
        CommandActions
          CommandClear
          CommandDivider
          CommandClose
      CommandContent
        CommandFilters
          CommandFilter
        CommandList
          CommandItem
        CommandEmpty

Keyboard

Pass activeOptionId so the input can expose aria-activedescendant. Handle ArrowUp / ArrowDown / Enter on the input in your app, matching the example.

API

Part	Role
Command	Dialog root; accepts activeOptionId for a11y.
CommandPopup	Centered panel (max-w-xl, 32rem tall).
CommandInput	Search combobox wired to the listbox id.
CommandFilter	Pill filter with aria-pressed / selected styles.
CommandItem	Result row; pass `href` for links.
CommandEmpty	Empty or loading state in the list area.