Components

Command palette

A ⌘K palette in liquid light: it drops in over a blurred page, the list springs to fit its results, matched letters glow and a liquid highlight slides between commands.

Paste it into ChatGPT, Claude, Cursor or v0.

Usage

React

import { CommandPalette, toast } from '@vizzele/react';

// Mount it once. ⌘K / Ctrl+K opens it from anywhere.
<CommandPalette
  items={[
    { label: 'New file', group: 'File', shortcut: '⌘N', icon: <FileIcon />, onSelect: newFile },
    { label: 'Open recent', group: 'File', onSelect: openRecent },
    {
      label: 'Toggle theme',
      group: 'View',
      keywords: ['dark', 'light'],
      description: 'Switch between deep space and pearl paper',
      onSelect: toggleTheme,
    },
    { label: 'Delete project', group: 'Danger', disabled: true },
  ]}
/>

// Or control it yourself
const [open, setOpen] = useState(false);
<Button onClick={() => setOpen(true)}>Search</Button>
<CommandPalette open={open} onOpenChange={setOpen} items={items} />

Props

Prop	Type	Default	Description
`items`	`CommandItem[]`	—	{ label, onSelect?, group?, description?, icon?, shortcut?, keywords?, disabled?, id? }
`open / defaultOpen / onOpenChange`	`boolean`	—	Controlled or uncontrolled.
`hotkey`	`string \| false`	`'k'`	Key that toggles it with ⌘ or Ctrl. false turns the shortcut off.
`placeholder`	`string`	`'Type a command or search…'`	Search field placeholder (also its accessible name).
`empty`	`ReactNode \| (query) => ReactNode`	—	Shown when nothing matches.
`keepOpen`	`boolean`	`false`	Stay open after running a command.
`footer`	`ReactNode \| null`	—	Replaces the keyboard hints; null hides the footer.

Usage

Props

Accessibility