Command Palette

A Cmd+K style global search and command overlay. Built on Radix Dialog with a built-in search context, keyboard hint badges, and grouped items.

Import

import {
  CommandPalette,
  CommandPaletteTrigger,
  CommandPaletteContent,
  CommandPaletteInput,
  CommandPaletteList,
  CommandPaletteGroup,
  CommandPaletteItem,
  CommandPaletteEmpty,
  CommandPaletteSeparator,
  CommandPaletteFooter,
} from "poyraz-ui/molecules";

Default

Full command palette with grouped items, icons, and keyboard shortcuts.

<CommandPalette>
  <CommandPaletteTrigger asChild>
    <Button variant="outline">Open Command Palette</Button>
  </CommandPaletteTrigger>
  <CommandPaletteContent>
    <CommandPaletteInput placeholder="Type a command or search..." />
    <CommandPaletteList>
      <CommandPaletteGroup heading="Suggestions">
        <CommandPaletteItem icon={<CalendarIcon />} shortcut="⌘D">
          Calendar
        </CommandPaletteItem>
        <CommandPaletteItem icon={<Smile />} shortcut="⌘E">
          Search Emoji
        </CommandPaletteItem>
      </CommandPaletteGroup>
      <CommandPaletteSeparator />
      <CommandPaletteGroup heading="Settings">
        <CommandPaletteItem icon={<User />} shortcut="⌘P">
          Profile
        </CommandPaletteItem>
        <CommandPaletteItem icon={<Settings />} shortcut="⌘S">
          Settings
        </CommandPaletteItem>
      </CommandPaletteGroup>
    </CommandPaletteList>
    <CommandPaletteFooter>
      <span>↑↓ Navigate</span>
      <span>·</span>
      <span>↵ Select</span>
      <span>·</span>
      <span>Esc Close</span>
    </CommandPaletteFooter>
  </CommandPaletteContent>
</CommandPalette>