Navigation

Command

Command palette: a filter input driving a keyboard-navigable listbox of grouped items, with an empty state and an optional modal dialog wrapper.

Import

import { Command, CommandInput, CommandList, CommandGroup, CommandItem, CommandEmpty, CommandDialog } from "@zephora/react";

Examples

Inline palette

Type to filter; ArrowUp/Down move the active item and Enter picks it.

Picked: none

const [last, setLast] = React.useState("none");

<Command>
  <CommandInput placeholder="Type a command…" />
  <CommandList>
    <CommandEmpty>No results.</CommandEmpty>
    <CommandGroup heading="Navigate">
      <CommandItem value="home" onSelect={setLast}>Go home</CommandItem>
      <CommandItem value="settings" onSelect={setLast}>Open settings</CommandItem>
    </CommandGroup>
    <CommandGroup heading="Actions">
      <CommandItem value="new-file" keywords={["create"]} onSelect={setLast}>
        New file
      </CommandItem>
      <CommandItem value="delete" disabled>Delete workspace</CommandItem>
    </CommandGroup>
  </CommandList>
</Command>
<p>Picked: {last}</p>

Command dialog

CommandDialog hosts the palette in a centered modal overlay.

const [open, setOpen] = React.useState(false);

<Button onClick={() => setOpen(true)}>Open palette</Button>
<CommandDialog open={open} onOpenChange={setOpen}>
  <Command>
    <CommandInput placeholder="Search…" />
    <CommandList>
      <CommandEmpty>No results.</CommandEmpty>
      <CommandItem value="docs" onSelect={() => setOpen(false)}>Open docs</CommandItem>
      <CommandItem value="theme" onSelect={() => setOpen(false)}>Toggle theme</CommandItem>
    </CommandList>
  </Command>
</CommandDialog>

API

Command props

Prop	Type	Default	Description
`unstyled`	`boolean`	`false`	Headless mode — inherited by all parts.

CommandInput props

Prop	Type	Default	Description
`…rest`	`Omit<InputHTMLAttributes<HTMLInputElement>, "value" \| "onChange" \| "size">`	—	Native input props (placeholder, autoFocus…). Value and onChange are managed by the Command root.

CommandItem props

Prop	Type	Default	Description
`value` *	`string`	—	Unique value used for filtering, selection and identity.
`keywords`	`string[]`	—	Extra strings matched by the filter.
`onSelect`	`(value: string) => void`	—	Called when the item is picked (click or Enter).
`disabled`	`boolean`	`false`	Disables selection and keyboard navigation.
`icon`	`ReactNode`	—	Leading icon.
`shortcut`	`ReactNode`	—	Trailing keyboard shortcut hint.

CommandGroup props

Prop	Type	Default	Description
`heading`	`ReactNode`	—	Optional heading rendered above the group's items.

CommandDialog props

Prop	Type	Default	Description
`open`	`boolean`	—	Controlled open state.
`defaultOpen`	`boolean`	`false`	Initial open state when uncontrolled.
`onOpenChange`	`(open: boolean) => void`	—	Called when the open state changes.
`aria-label`	`string`	`"Command palette"`	Accessible name of the dialog.

Keyboard

Key	Action
`ArrowDown / ArrowUp`	Move the active item through matching results.
`Home / End`	Jump to the first / last matching item.
`Enter`	Picks the active item.
`Escape`	Closes the CommandDialog.