CommandPalette

A modal command palette overlay with fuzzy search, grouped results, match highlighting, keyboard navigation, and focus trap.

Installation

npx @obi/ui add command-palette

Preview

Press Esc to close

Usage

'use client';

import { useState } from 'react';
import { CommandPalette, CommandGroup, CommandItem } from '@/src/components/CommandPalette/CommandPalette';

export default function Example() {
  const [open, setOpen] = useState(false);

  return (
    <>
      <button onClick={() => setOpen(true)}>Open palette</button>
      <CommandPalette open={open} onClose={() => setOpen(false)}>
        <CommandGroup label="Navigation">
          <CommandItem value="Dashboard" onSelect={() => setOpen(false)} shortcut="G D">Dashboard</CommandItem>
          <CommandItem value="Settings" onSelect={() => setOpen(false)} shortcut="G S">Settings</CommandItem>
        </CommandGroup>
        <CommandGroup label="Actions">
          <CommandItem value="New document" onSelect={() => setOpen(false)}>New document</CommandItem>
          <CommandItem value="Export PDF" onSelect={() => setOpen(false)}>Export PDF</CommandItem>
        </CommandGroup>
      </CommandPalette>
    </>
  );
}

Props

Name	Type	Default	Description
open	boolean	—	Whether the palette is visible.
onClose	() => void	—	Called when the user presses Escape, clicks the backdrop, or activates an item.
placeholder	string	'Search commands…'	Placeholder text in the search input.
children	ReactNode	—	CommandGroup and CommandItem elements.