Command Palette

CommandPalette

Searchable command menu with keyboard navigation, sections, hotkey support, and animated items. Typically used inside a Dialog for modal access.

Import

import {
  CommandPalette,
  CommandPaletteItem,
  CommandPaletteSection,
  CommandPaletteInput
} from 'reablocks';

CommandPalette Props

CommandPaletteSection Props

CommandPaletteItem Props

Basic Usage

<CommandPalette>
  <CommandPaletteSection title="Actions">
    <CommandPaletteItem => doSomething()}>
      New File
    </CommandPaletteItem>
    <CommandPaletteItem => doSomethingElse()}>
      Open Settings
    </CommandPaletteItem>
  </CommandPaletteSection>
  <CommandPaletteSection title="Navigation">
    <CommandPaletteItem => navigate('/home')}>
      Go to Home
    </CommandPaletteItem>
  </CommandPaletteSection>
</CommandPalette>

With Icons

<CommandPaletteSection title="Actions">
  <CommandPaletteItem
    start={<FileIcon />}
    => newFile()}
  >
    New File
  </CommandPaletteItem>
  <CommandPaletteItem
    start={<SettingsIcon />}
    => openSettings()}
  >
    Settings
  </CommandPaletteItem>
</CommandPaletteSection>

With Hotkeys

<CommandPaletteItem hotkey="mod+n" => newFile()}>
  New File
</CommandPaletteItem>
<CommandPaletteItem hotkey="mod+," => openSettings()}>
  Settings
</CommandPaletteItem>

When onHotkey is provided on the CommandPalette, pressing the hotkey triggers the callback with the matched item.

Inside a Dialog

Common pattern — open with a keyboard shortcut:

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

<Dialog open={open} => setOpen(false)}>
  <CommandPalette
    placeholder="Type a command..."
   
  >
    <CommandPaletteSection title="Commands">
      <CommandPaletteItem => { action(); setOpen(false); }}>
        Do Something
      </CommandPaletteItem>
    </CommandPaletteSection>
  </CommandPalette>
</Dialog>

Empty State

<CommandPalette emptyMessage="No results found">
  {filteredItems.length === 0 ? null : (
    <CommandPaletteSection title="Results">
      {filteredItems.map(item => (
        <CommandPaletteItem key={item.id}>{item.label}</CommandPaletteItem>
      ))}
    </CommandPaletteSection>
  )}
</CommandPalette>

Keyboard Navigation

• Arrow Up/Down — navigate between items
• Enter — select the active item
• Hotkey shortcuts — trigger items with assigned hotkeys

CommandPaletteTheme Interface

interface CommandPaletteTheme {
  base: string;              // Root container
  inner: string;             // Items container
  emptyContainer: string;    // Empty state container
  input: {
    base: string;            // Input container
    input: string;           // Input element
    icon: string;            // Search icon wrapper
  };
  item: {
    base: string;            // Item container
    active: string;          // Active item highlight
    clickable: string;       // Clickable item styles
  };
  section: {
    base: string;            // Section container
    first: string;           // First section override
  };
}