Command Palette

Component 6

About

A keyboard-driven (⌘/Ctrl+J) modal command palette with a search field and filtered menu list for quickly running commands or navigating an app.

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

"use client";

import CommandPalette from "@/components/ui/tailwind-commandpalette";
import { MenuItem } from "@/components/ui/tailwind-commandpalette-utils/Menu";
import { useState } from "react";

export default function CommandPaletteDemo() {
  const [isOpen, setOpen] = useState(false);

  return (
    <div className="flex items-center justify-center w-full h-full p-8">
      <button
        onClick={() => setOpen(true)}
        className="px-4 py-2 rounded-lg border border-neutral-300 dark:border-neutral-700 text-sm font-sans text-neutral-700 dark:text-neutral-300 bg-white dark:bg-neutral-800"
      >
        Open command palette (⌘J)
      </button>
      <CommandPalette
        isOpen={isOpen}
        onOpenChange={setOpen}
        aria-label="Commands"
      >
        <MenuItem id="new-file">New File</MenuItem>
        <MenuItem id="new-window">New Window</MenuItem>
        <MenuItem id="open-file">Open File...</MenuItem>
        <MenuItem id="save">Save</MenuItem>
        <MenuItem id="settings">Settings</MenuItem>
      </CommandPalette>
    </div>
  );
}