"use client"; import * as React from "react"; import { Command } from "cmdk"; import { Dialog as DialogPrimitive } from "radix-ui"; import { cn } from "@kineticui/core"; import { SearchIcon } from "@kineticui/icons"; export type CommandItem = { id: string; label: string; group?: string; icon?: React.ReactNode; shortcut?: string; keywords?: string[]; onSelect: () => void; }; export type CommandPaletteProps = { items: CommandItem[]; open?: boolean; onOpenChange?: (open: boolean) => void; placeholder?: string; /** Open with ⌘K / Ctrl+K. Default true. */ hotkey?: boolean; emptyText?: string; }; /** ⌘K palette with fuzzy search, groups and keyboard navigation. */ export function CommandPalette({ items, open: controlled, onOpenChange, placeholder = "Search or run a command…", hotkey = true, emptyText = "No results.", }: CommandPaletteProps) { const [internal, setInternal] = React.useState(false); const open = controlled ?? internal; const setOpen = React.useCallback( (v: boolean) => { if (controlled === undefined) setInternal(v); onOpenChange?.(v); }, [controlled, onOpenChange], ); React.useEffect(() => { if (!hotkey) return; const onKey = (e: KeyboardEvent) => { if (e.key.toLowerCase() === "k" && (e.metaKey || e.ctrlKey)) { e.preventDefault(); setOpen(!open); } }; window.addEventListener("keydown", onKey); return () => window.removeEventListener("keydown", onKey); }, [hotkey, open, setOpen]); const groups = React.useMemo(() => { const map = new Map(); for (const it of items) { const g = it.group ?? "Actions"; map.set(g, [...(map.get(g) ?? []), it]); } return [...map.entries()]; }, [items]); return ( Command palette

ESC

{emptyText} {groups.map(([group, list]) => ( {list.map((it) => ( { it.onSelect(); setOpen(false); }} className={cn( "group flex cursor-default items-center gap-3 rounded-xl px-3 py-2.5 text-sm text-muted outline-none", "data-[selected=true]:bg-accent-soft data-[selected=true]:text-foreground", )} > {it.icon ? ( {it.icon} ) : null} {it.label} {it.shortcut ? {it.shortcut} : null} ))} ))}

↑↓ navigate · ↵ select ⌘K to toggle

); }

Command Palette

Installation

Exports