Command Palette

A Cmd+K command palette with fuzzy search, keyboard navigation, grouped results, and shortcut hints.

Preview

Press ⌘K to open

Type a command or search...

ESC

Actions

Create New Project

Start a new project from scratch

N

Invite Team Member

I

Settings

Toggle Theme

T

↑↓ navigate↵ select

Installation

npx shadcn@latest add @shadszn/command-palette

Files Installed

command-palette/command-palette.tsx -- Full command palette component

Key Features

Opens with Cmd+K (or Ctrl+K on Windows/Linux)
Real-time search filtering across labels and descriptions
Arrow key navigation with Enter to select
Grouped results with section headings
Keyboard shortcut badges per item
Built on Dialog component with glass-morphism styling

Usage

import { CommandPalette } from "@/components/blocks/command-palette"

export default function Layout({ children }) {
  return (
    <div>
      <CommandPalette
        groups={[
          {
            heading: "Navigation",
            items: [
              {
                id: "dashboard",
                label: "Dashboard",
                description: "View your workspace",
                onSelect: () => router.push("/dashboard"),
              },
              {
                id: "settings",
                label: "Settings",
                shortcut: "S",
                onSelect: () => router.push("/settings"),
              },
            ],
          },
        ]}
      />
      {children}
    </div>
  )
}

Props

Prop	Type	Default	Description
groups	CommandGroup[]	defaultGroups	Array of command groups, each with heading and items.