1Sponsor

Command Palette

VS Code–style command palette with fuzzy search

Terminal

Installation

pnpm dlx shadcn@latest add https://termcn.dev/r/command-palette.json

Usage

import { CommandPalette } from "@/components/ui/command-palette";
<CommandPalette
  isOpen={true}
  onClose={() => setOpen(false)}
  commands={[
    { id: "save", label: "Save", onSelect: () => {} },
    { id: "quit", label: "Quit", onSelect: () => {} },
  ]}
/>

API Reference

CommandPalette

PropTypeDefault
commandsCommand[]required
isOpenbooleanrequired
onClose() => voidrequired
placeholderstring"Type a command..."
maxItemsnumber8

Command

PropTypeDefault
idstringrequired
labelstringrequired
descriptionstringundefined
shortcutstringundefined
onSelect() => voidrequired
groupstringundefined