Command Palette

A clean command palette with smooth scale animations, search functionality, keyboard navigation, and customizable command groups.

Preview

click me

Installation

Install the component using the CLI.

$npx shadcn@latest add https://ankurz.me/r/command-palette.json

Usage

Import the component:

import { CommandPaletteProvider, CommandPalette, CommandPaletteSearchTrigger } from "@/components/command-palette"

Use it in your code:

const groups = [
  {
    heading: "Navigation",
    items: [
      { id: "home", label: "Go to Home", shortcut: ["G", "H"] },
      { id: "projects", label: "View Projects" },
    ],
  },
];

<CommandPaletteProvider>
  <CommandPaletteSearchTrigger placeholder="Search..." />
  <CommandPalette
    groups={groups}
    onSelect={(item) => console.log(item)}
  />
</CommandPaletteProvider>

Props

Property	Type	Default	Description
`groups*`	`array`	`-`	Array of command groups, each with heading and items array.
`placeholder`	`string`	`"Type a command or search..."`	Placeholder text for the search input.
`onSelect`	`function`	`undefined`	Callback fired when a command is selected. Receives the selected item.
`emptyMessage`	`string`	`"No results found."`	Message shown when no results match the search.
`className`	`string`	`""`	Additional CSS classes for the palette container.