Feedback

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.

view .md

Preview

inline · hover or use the arrows

palette↑↓ navigate↵ openesc close

as a dialog

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)