Command Palette

Navigation

About

Keyboard-first command menu with a platform shortcut, nested pages, remembered recents and shortcut hints on each row.

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Command Palette to your project and fits it to your theme.

Code

How Command Palette is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

import {
  CommandPalette,
  CommandPaletteDialog,
  CommandPaletteEmpty,
  CommandPaletteGroup,
  CommandPaletteInput,
  CommandPaletteItem,
  CommandPaletteList,
  CommandPalettePage,
  CommandPaletteRecents,
  CommandPaletteTrigger,
} from "@/components/ui/command-palette";
import {
  FileText,
  Folder,
  Home,
  Moon,
  Settings,
  Sun,
  User,
} from "lucide-react";

export default function CommandPaletteDemo() {
  return (
    <div className="flex min-h-[420px] w-full flex-col items-center justify-center gap-3 bg-background p-8 text-foreground">
      <CommandPalette recentsKey="command-palette-demo-recents">
        <CommandPaletteTrigger>
          <span>Search or jump to...</span>
        </CommandPaletteTrigger>
        <p className="text-xs text-muted-foreground">
          Open it with the button, or the keyboard shortcut it shows.
        </p>

        <CommandPaletteDialog
          title="Command Palette"
          description="Search actions and pages"
        >
          <CommandPaletteInput />
          <CommandPaletteList>
            <CommandPaletteEmpty>No results found.</CommandPaletteEmpty>

            <CommandPaletteRecents>
              {(recent) => (
                <CommandPaletteItem
                  key={recent.id}
                  recentId={recent.id}
                  label={recent.label}
                >
                  <FileText className="size-4" />
                  {recent.label}
                </CommandPaletteItem>
              )}
            </CommandPaletteRecents>

            <CommandPaletteGroup heading="Suggestions">
              <CommandPaletteItem
                recentId="home"
                label="Go to Home"
                shortcut="⌘H"
              >
                <Home className="size-4" />
                Go to Home
              </CommandPaletteItem>
              <CommandPaletteItem
                recentId="projects"
                label="Open Projects"
                shortcut="⌘P"
              >
                <Folder className="size-4" />
                Open Projects
              </CommandPaletteItem>
              <CommandPaletteItem recentId="profile" label="View Profile">
                <User className="size-4" />
                View Profile
              </CommandPaletteItem>
            </CommandPaletteGroup>

            <CommandPaletteGroup heading="Settings">
              <CommandPaletteItem label="Theme" page="theme">
                <Settings className="size-4" />
                Theme
              </CommandPaletteItem>
            </CommandPaletteGroup>
          </CommandPaletteList>

          <CommandPalettePage name="theme">
            <CommandPaletteList>
              <CommandPaletteGroup heading="Theme">
                <CommandPaletteItem recentId="theme-light" label="Light">
                  <Sun className="size-4" />
                  Light
                </CommandPaletteItem>
                <CommandPaletteItem recentId="theme-dark" label="Dark">
                  <Moon className="size-4" />
                  Dark
                </CommandPaletteItem>
              </CommandPaletteGroup>
            </CommandPaletteList>
          </CommandPalettePage>
        </CommandPaletteDialog>
      </CommandPalette>
    </div>
  );
}