# CommandPalette

> ⌘K command palette built on cmdk, on the overlay surface. Rows highlight like a dropdown: the brand tint, and the icon and shortcut turn brand. Kbd chips for esc and the footer hints. Use Command alone for an inline list, or inside CommandDialog. Wire the shortcut with useCommandPalette.

Section: Feedback. Docs: https://entrepta.vercel.app/docs/components/command-palette

## Install

```bash
npx @entrepta/cli@latest add command-palette
```

Files: `feedback/command-palette.tsx`, `hooks/use-command-palette.ts`, `primitives/kbd.tsx`, `lib/overlay.ts`.
npm packages: `cmdk`, `@radix-ui/react-dialog`, `@phosphor-icons/react`.
Comes with: `use-command-palette`, `kbd`, `overlay-lib`.

## Usage

```tsx
import {
  Command, CommandDialog, CommandInput,
  CommandList, CommandGroup, CommandItem, CommandEmpty,
  CommandSeparator, CommandFoot,
} from "@/components/entrepta/command-palette"
import { useCommandPalette } from "@/hooks/use-command-palette"

export function MyPalette() {
  const { open, setOpen } = useCommandPalette()
  return (
    <CommandDialog open={open} onOpenChange={setOpen}>
      <Command>
        <CommandInput placeholder="type to filter…" />
        <CommandList>
          <CommandEmpty>No results.</CommandEmpty>
          <CommandGroup heading="pages">
            <CommandItem shortcut="⌘1" onSelect={() => router.push("/")}>
              home.tsx
            </CommandItem>
          </CommandGroup>
          <CommandSeparator />
          <CommandGroup heading="actions">
            <CommandItem shortcut="⌘⇧D" onSelect={deploy}>
              Deploy to production
            </CommandItem>
          </CommandGroup>
        </CommandList>
        <CommandFoot />
      </Command>
    </CommandDialog>
  )
}
```

## Props

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `open` | `boolean` | - | Controlled open state (CommandDialog) |
| `onOpenChange` | `(open: boolean) => void` | - | Callback on close (CommandDialog) |
| `placeholder` | `string` | - | Input placeholder (CommandInput) |
| `shortcut` | `string` | - | Keyboard shortcut label (CommandItem) |
| `icon` | `ReactNode` | - | Icon before label (CommandItem) |