A command palette for searching, filtering, and selecting from a list of options.

Command

The Command component provides a searchable command palette with fuzzy filtering, keyboard navigation, and grouping capabilities. It's ideal for command menus, search interfaces, and autocomplete functionality.

Use CommandDialog for a modal command palette experience, or compose the parts directly for inline usage.

Features

Fuzzy search with intelligent scoring
Keyboard navigation with arrow keys and vim bindings (Ctrl+J/K)
Grouped items with headings
Controlled and uncontrolled modes
Loading and empty states
Automatic item ordering by relevance
Accessible with proper ARIA attributes
Custom filtering support

Usage

import {
  Command,
  CommandInput,
  CommandList,
  CommandEmpty,
  CommandGroup,
  CommandItem,
} from '@loke/design-system/command';

export default function Example() {
  return (
    <Command>
      <CommandInput placeholder="Type a command or search..." />
      <CommandList>
        <CommandEmpty>No results found.</CommandEmpty>
        <CommandGroup heading="Suggestions">
          <CommandItem>Calendar</CommandItem>
          <CommandItem>Search</CommandItem>
          <CommandItem>Settings</CommandItem>
        </CommandGroup>
      </CommandList>
    </Command>
  );
}

Tips:

Items are automatically filtered as you type.
Use CommandGroup to organize related items with headings.
Add keywords to items for additional search terms.
Use onSelect on items to handle selection.

Props

Command

Prop

Type

CommandInput

Prop

Type

CommandItem

Prop

Type

CommandGroup

Prop

Type

CommandDialog

Prop

Type

Examples

Basic command

<Command className="rounded-lg border shadow-md">
  <CommandInput placeholder="Type a command or search..." />
  <CommandList>
    <CommandEmpty>No results found.</CommandEmpty>
    <CommandGroup heading="Suggestions">
      <CommandItem>Calendar</CommandItem>
      <CommandItem>Search Emoji</CommandItem>
      <CommandItem>Calculator</CommandItem>
    </CommandGroup>
  </CommandList>
</Command>

Command dialog

Press ⌘K or click the button

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

useEffect(() => {
  const down = (e: KeyboardEvent) => {
    if (e.key === 'k' && (e.metaKey || e.ctrlKey)) {
      e.preventDefault();
      setOpen((open) => !open);
    }
  };
  document.addEventListener('keydown', down);
  return () => document.removeEventListener('keydown', down);
}, []);

<CommandDialog open={open} onOpenChange={setOpen}>
  <CommandInput placeholder="Type a command or search..." />
  <CommandList>
    <CommandEmpty>No results found.</CommandEmpty>
    <CommandGroup heading="Actions">
      <CommandItem>
        <Calendar className="mr-2 h-4 w-4" />
        <span>Calendar</span>
        <CommandShortcut>⌘C</CommandShortcut>
      </CommandItem>
    </CommandGroup>
  </CommandList>
</CommandDialog>

Command with groups

<Command className="rounded-lg border shadow-md">
  <CommandInput placeholder="Search..." />
  <CommandList>
    <CommandEmpty>No results found.</CommandEmpty>
    <CommandGroup heading="Settings">
      <CommandItem>Profile</CommandItem>
      <CommandItem>Billing</CommandItem>
      <CommandItem>Settings</CommandItem>
    </CommandGroup>
    <CommandSeparator />
    <CommandGroup heading="Actions">
      <CommandItem>New File</CommandItem>
      <CommandItem>New Folder</CommandItem>
    </CommandGroup>
  </CommandList>
</Command>

Command with loading state

const [loading, setLoading] = useState(true);

<Command>
  <CommandInput placeholder="Search..." />
  <CommandList>
    {loading && (
      <CommandLoading>Loading...</CommandLoading>
    )}
    <CommandEmpty>No results found.</CommandEmpty>
    <CommandGroup heading="Results">
      {items.map((item) => (
        <CommandItem key={item}>{item}</CommandItem>
      ))}
    </CommandGroup>
  </CommandList>
</Command>

Accessibility

Uses ARIA combobox pattern for screen reader support.
Keyboard navigation with arrow keys, Home, End.
Vim-style navigation with Ctrl+J/K/N/P.
Enter key triggers item selection.
Search input is properly labeled.
Items announce their selected state.
Loading state includes ARIA progressbar.

Best practices

Use descriptive item text for better search matching.
Add keywords for items that might be searched by alternative terms.
Group related items together with CommandGroup.
Provide an empty state message with CommandEmpty.
Use CommandShortcut to display keyboard shortcuts.
For modal usage, prefer CommandDialog with a keyboard shortcut trigger.
Keep the command palette focused — avoid too many items or deep nesting.

Command

Command Palette

On this page