Murasaki
Components

Command

A searchable command menu for keyboard-first actions.

Open settings ⌘,
New window ⌘N

Usage

import {
  Command, CommandEmpty, CommandGroup, CommandInput,
  CommandItem, CommandList, CommandShortcut,
} from '@murasakijs/ui'

<Command className="rounded-lg border">
  <CommandInput placeholder="Type a command…" />
  <CommandList>
    <CommandEmpty>No results.</CommandEmpty>
    <CommandGroup heading="Navigation">
      <CommandItem>Open settings <CommandShortcut>⌘,</CommandShortcut></CommandItem>
    </CommandGroup>
  </CommandList>
</Command>

Use CommandDialog for a modal command palette and control its open state with the exported dialog props. A displayed shortcut is documentation only; register the keyboard handler separately. Commands must also remain reachable without a shortcut. Command uses React Aria's ComboBox and ListBox behavior for filtering, focus, and item selection.

Improve this page on GitHub

On this page