Command Palette

One search box for every client, invoice, page and action, opened with Cmd or Ctrl K, built from Another UI primitives.

Try “hd”, “overdue” or “0951”, or open Change theme.

Installation


pnpm dlx shadcn@latest add https://anotherui.dev/r/command-palette.json

Features

Opens anywhere. Cmd K on a Mac or Ctrl K elsewhere toggles it. The trigger looks like a search field and shows the shortcut for the platform.
Grouped results. Suggestions, Clients, Invoices, Pages and Actions, each with an icon, a short hint and its keyboard shortcut on the right.
Loose matching. Every typed letter has to appear in order, so "hd" finds Harbour Dental. Matched letters are highlighted, and keywords such as "overdue" or "bill" find items whose names do not contain them.
Scope. All, Clients, Invoices and Actions sit in one toolbar row under the input.
Pages. Commands like Change theme and Assign to open a page of their own. Its name shows as a chip in the input, the list swaps in, and Backspace on an empty input goes back.
Slower results. Pass search for a server lookup. It runs once typing settles and shows skeleton rows until it answers.
Recents. The last five commands you ran show first when the input is empty. They live in this browser only.
Preview. On wider screens, the highlighted client or invoice shows its details in a panel on the right. On phones the palette sits at the top of the screen at full width and the preview is hidden.
Empty state. When nothing matches, an Empty says so and suggests fewer letters or another scope.
Sounds. The dialog plays Cuelume's open and close cues. Moving between pages plays navigate and running a command plays select.

Usage

import {
  CommandPalette,
  CommandPaletteTrigger,
  type PaletteItem,
} from "@/components/blocks/command-palette"
 
const items: PaletteItem[] = [
  {
    id: "new-invoice",
    group: "Suggestions",
    label: "New invoice",
    icon: PlusIcon,
    shortcut: ["⌘", "N"],
    scope: "actions",
    run: () => router.push("/invoices/new"),
  },
  {
    id: "theme",
    group: "Actions",
    label: "Change theme...",
    icon: SunIcon,
    page: "theme",
  },
]
 
const pages = [
  {
    id: "theme",
    title: "Theme",
    items: [
      { id: "light", group: "Theme", label: "Light", run: () => setTheme("light") },
      { id: "dark", group: "Theme", label: "Dark", run: () => setTheme("dark") },
    ],
  },
]
 
const [open, setOpen] = React.useState(false)
 
<CommandPaletteTrigger onClick={() => setOpen(true)} />
<CommandPalette
  items={items}
  pages={pages}
  open={open}
  onOpenChange={setOpen}
  search={(q) => fetchInvoices(q)}
/>

Props

items. The root list. Each item has an id, a group heading and a label, plus an optional icon, hint, shortcut, keywords, scope and preview.
run. What the item does. The palette closes and remembers it as a recent.
page. Open a page instead of running. Match it to an id in pages.
pages. Sub lists with a title for the chip and an optional placeholder.
search. An async function for slower results. It is called once two or more letters have been typed.
preview. A title, a subtitle and label and value rows for the panel on the right.
open, onOpenChange. Control it yourself, or leave both off and let Cmd K handle it.
hotkey. Set to false to skip binding Cmd or Ctrl K.

Repeatable Group Sign In and Sign Up