Feedback

CommandPalette

⌘K command palette built with cmdk. Centered modal with ◆ brand-tinted selection, esc-to-close chip, and a status foot showing keyboard hints. Wire global shortcut with useCommandPalette.

Preview

Installation

terminal

bash

npx @entrepta/cli@latest add command-palette

// Resolves dependencies, copies the source, and installs npm packages automatically.

Usage

command-palette.tsx

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)