Command Palette

Navigation

About

A searchable, keyboard-first command/navigation overlay (⌘K-style) for jumping to pages or running actions from a dialog with grouped, filterable results.

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 * as React from "react";
import { Button } from "@/components/ui/button";
import {
  CommandPalette,
  CommandInput,
  CommandList,
  CommandEmpty,
  CommandGroup,
  CommandItem,
  CommandSeparator,
  CommandShortcut,
} from "@/components/ui/command-palette";

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

  return (
    <div className="flex min-h-[400px] w-full items-center justify-center p-10">
      {!open && (
        <Button onClick={() => setOpen(true)}>Open command palette</Button>
      )}
      <CommandPalette open={open} onOpenChange={setOpen} label="Command menu">
        <CommandInput placeholder="Type a command or search…" />
        <CommandList>
          <CommandEmpty>No results found.</CommandEmpty>
          <CommandGroup heading="Pages">
            <CommandItem onSelect={() => setOpen(false)}>Overview</CommandItem>
            <CommandItem onSelect={() => setOpen(false)}>Members</CommandItem>
            <CommandItem onSelect={() => setOpen(false)}>Billing</CommandItem>
          </CommandGroup>
          <CommandSeparator />
          <CommandGroup heading="Actions">
            <CommandItem onSelect={() => setOpen(false)}>
              Invite member
              <CommandShortcut>⌘I</CommandShortcut>
            </CommandItem>
          </CommandGroup>
        </CommandList>
      </CommandPalette>
    </div>
  );
}