Command Palette

A Spotlight/VS Code-style command palette with keyboard navigation, fuzzy search, and AI-powered suggestions. Press Cmd+K (Mac) or Ctrl+K (Windows/Linux) to open.

Preview

Install Summary

This kit will add the following files and dependencies to your project. Download the bundle and extract it into your project root.

Component Files

File	Path
command-palette.tsx	components/ai-assist/command-palette/command-palette.tsx
command-group.tsx	components/ai-assist/command-palette/command-group.tsx
command-item.tsx	components/ai-assist/command-palette/command-item.tsx
types.ts	components/ai-assist/command-palette/types.ts
index.ts	components/ai-assist/command-palette/index.ts

Utility Files

File	Path
design-tokens.ts	lib/design-tokens.ts

Dependencies

Install these dependencies before using the component:

Terminal

bash

npx shadcn@latest add dialog input button

Terminal

bash

npm install @phosphor-icons/react

Installation

Download the complete bundle as a ZIP file, or copy the text bundle to your clipboard:

Component Files

The component consists of the following files:

1. command-palette.tsx

command-palette.tsx

tsx

"use client";

import { useEffect, useMemo, useState, useCallback } from "react";
import {
  Command as CommandIcon,

2. command-group.tsx

command-group.tsx

tsx

"use client";

import { CommandItem } from "./command-item";
import type { CommandItem as CommandItemType } from "./types";

3. command-item.tsx

command-item.tsx

tsx

"use client";

import { cn } from "@/lib/utils";
import type { CommandItem as CommandItemType } from "./types";

4. types.ts

types.ts

tsx

export interface CommandItem {
  id: string;
  label: string;
  description?: string;
  icon?: React.ComponentType<{ className?: string }>;

5. index.ts

index.ts

tsx

export { CommandPalette, CommandPaletteTrigger } from "./command-palette";
export type { CommandPaletteProps, CommandItem } from "./types";

Shared Utilities

This component uses shared utility functions. These are included in the bundle above:

design-tokens.ts

tsx

// Border radius
export const radius = {
  card: "rounded-xl",
  badge: "rounded-full",
  button: "rounded-lg",

Usage

app/page.tsx

tsx

"use client";

import { CommandPalette, type CommandItem } from "@/components/ai-assist";
import { File, Settings } from "@phosphor-icons/react";

Props

Prop	Type	Default
commands	CommandItem[]	Required
onCommandSelect	(command) => void	-
placeholder	string	"Search..."
emptyState	{ title: string, description: string }	{ title: "No results", description: "Try a different search term." }
recentCommands	string[]	[]
maxRecentCommands	number	5
showTrigger	boolean	true
triggerClassName	string	-