Lenso UI

Foundation component · Navigation

Command Menu

Search, filter, and select a command with keyboard navigation.

Live playground

Issue actions
Assign owner
Change status
Set priority
Move to project
Add label
Set due date

The playground previews search and selection. Choosing a sample command fills the input; it does not change application data.

Choose Command Menu when

  • Use for fast, keyboard-first actions and navigation.
  • Compose inside a Dialog when the menu should be modal.

Accessibility

  • Combobox semantics, filtering, and arrow-key navigation come from Base UI.

Implementation

Every visual part remains replaceable through the composition API.

import { CommandMenu } from "@lenso/ui/command-menu";

<CommandMenu.Root items={commands}>
  <CommandMenu.Panel>
    <CommandMenu.Search>
      <CommandMenu.Input placeholder="Type a command or search…" />
    </CommandMenu.Search>
    <CommandMenu.List>
      {(command) => <CommandMenu.Item value={command}>{command}</CommandMenu.Item>}
    </CommandMenu.List>
  </CommandMenu.Panel>
</CommandMenu.Root>;
Lenso UI