CommandPalette

⌘K-style searchable command overlay. You own isOpen / onOpenChange and typically close inside onAction. Items match on title, meta, and optional keywords. The panel uses overlay presence attributes (data-open, data-starting-style, data-ending-style); see Overlay lifecycle. onOpenChange is still (open: boolean).

Examples

Default

Open from a button (demos disable the global hotkey so pages stay calm).

import { CommandPalette } from '@var-ui/react';

<CommandPalette
  isOpen={open}
  onOpenChange={setOpen}
  items={[{ id: 'docs', title: 'Docs', meta: 'Guides' }]}
  onAction={() => setOpen(false)}
/>

Grouped results via meta

Use meta (and keywords) so related commands are scannable and searchable even when titles are short.

import { Button, CommandPalette } from '@var-ui/react';
import { useState } from 'react';

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

<Button intent="secondary" onPress={() => setOpen(true)}>
  Open palette
</Button>
<CommandPalette
  isOpen={open}
  onOpenChange={setOpen}
  hotkey={false}
  items={[
    { id: 'new-file', title: 'New file', meta: 'File', keywords: ['create'] },
    { id: 'theme', title: 'Toggle theme', meta: 'Appearance', keywords: ['dark'] },
    { id: 'settings', title: 'Open settings', meta: 'Navigation' },
  ]}
  onAction={() => setOpen(false)}
/>

Props

Accessibility

When open, focus moves to the search field; arrow keys move through results, Enter activates, Escape closes. Provide clear title text — meta is secondary. The default hotkey is ⌘K / Ctrl+K (hotkey); disable it in embedded demos if it would fight the host page.