CommandPalette

A modal command search. It is controlled — you own the open state (typically toggled by a global ⌘K listener). Commands filter by label plus optional keywords, and group under group headings.


import { CommandPalette } from '@gg-software/ui';
 
const [open, setOpen] = useState(false);
 
// global shortcut
useEffect(() => {
    const onKey = (e: KeyboardEvent) => {
        if (e.key === 'k' && (e.metaKey || e.ctrlKey)) {
            e.preventDefault();
            setOpen(true);
        }
    };
    window.addEventListener('keydown', onKey);
    return () => window.removeEventListener('keydown', onKey);
}, []);
 
<CommandPalette
    open={open}
    onClose={() => setOpen(false)}
    commands={[
        { id: 'new', label: 'New project', group: 'Actions', shortcut: '⌘N', onSelect: createProject },
        { id: 'orders', label: 'Go to Orders', group: 'Navigate', keywords: 'shop sales', onSelect: gotoOrders },
    ]}
/>;

Props

Prop	Type	Default
`open`*	`boolean`	—
`onClose`*	`() => void`	—
`commands`*	`Command[]`	—
`placeholder`	`string`	`Type a command or search…`
`emptyText`	`ReactNode`	`No results`

* required · generated from packages/ui/src/navigation/CommandPalette/CommandPalette.tsx

Types


type Command = {
    id: string;
    label: string;
    icon?: ReactNode;
    shortcut?: ReactNode;
    keywords?: string; // extra text matched by the filter
    group?: string;
    onSelect: () => void;
};