Command Palette

A compact key hints bar that collects all named keybindings registered across the app. In interactive mode, it captures input and lets the user fuzzy-search and execute commands — type to filter, up/down arrow keys to navigate, Enter to execute, Escape to close. In non-interactive mode, it displays available keybindings for the currently focused context.

Components register commands by passing a name field to useKeybindings. The default UI shows no keybinding hints of its own — use the render prop to add them, or display a static <CommandPalette interactive={false} /> elsewhere in the layout.

Interactive (Search & Execute)

import { useKeybindings, useFocusScope } from 'giggles';
import { CommandPalette } from 'giggles/ui';
import { useState } from 'react';

function App() {
  const focus = useFocusScope();
  const [showPalette, setShowPalette] = useState(false);

  useKeybindings(focus, {
    'ctrl+k': { action: () => setShowPalette(true), name: 'Open palette' },
  });

  return (
    <>
      <FileList />
      {showPalette && <CommandPalette onClose={() => setShowPalette(false)} />}
    </>
  );
}

Non-Interactive (Hints Bar)

import { CommandPalette } from 'giggles/ui';

function App() {
  return (
    <Box flexDirection="column">
      <Content />
      <CommandPalette interactive={false} />
    </Box>
  );
}

Terminal

See RegisteredKeybinding on the Input page.

Command Palette

API Reference

CommandPalette

CommandPaletteRenderProps

On this page