Pesto UI

Command

A filterable list of actions and destinations — the command palette. Type to narrow it, arrow to move, Enter to run.

tsx
import {
  Command,
  CommandInput,
  CommandList,
  CommandEmpty,
  CommandGroup,
  CommandItem,
  CommandSeparator,
  CommandShortcut,
} from "@pestoui/core"

Inline palette

Filtering is built in: each item is matched against its text. CommandEmpty shows when nothing matches.

In a dialog

CommandDialog supplies the modal and nothing else — put a Command inside it. Its title and description are read by screen readers and not drawn.

Search the workspace

Find an agent or run an action.

Props

PropTypeDefaultDescription
headingReactNode—On CommandGroup. The group's caption.
onSelect(value: string) => void—On CommandItem. Fires on click or Enter.
value / keywordsstring / string[]—On CommandItem. What the filter matches against; defaults to the item's text.
placeholderstring—On CommandInput.
titlestring"Command Palette"On CommandDialog. The dialog's accessible name; visually hidden.
descriptionstring"Search for a command to run..."On CommandDialog. The dialog's accessible description; visually hidden.
showCloseButtonbooleanfalseOn CommandDialog. Draws the dialog's × button.
open / onOpenChangeboolean / (open: boolean) => void—On CommandDialog.
PreviousColor PickerNext Context Menu

Pesto UI · 117 documented components