Command palettePro

• Power-user actions and site search behind ⌘K.
• Long action lists that benefit from type-to-filter.

• As the only way to reach an action: keep visible controls too.
• Choosing a form value: use a combobox.

Import it from @/components/ui/command-palette after installing.

import * as React from "react";
import { useRouter } from "next/navigation";
import { CommandDialog, useCommandShortcut } from "@/components/ui/command-palette";

export function GlobalSearch() {
  const router = useRouter();
  const [open, setOpen] = React.useState(false);
  useCommandShortcut(() => setOpen((o) => !o));
  return (
    <CommandDialog
      open={open}
      onOpenChange={setOpen}
      groups={[{ heading: "Pages", items: [{ id: "/settings", label: "Settings", keywords: ["account"] }] }]}
      onSelect={(item) => router.push(item.id)}
    />
  );
}

• The input is a combobox controlling a listbox through aria-activedescendant.
• Matched text is underlined, not just colored.
• The dialog is aria-modal and returns focus to where it was opened from.

• The highlight glides between rows (spring, 220ms).
• The list height animates as results filter.
• The dialog scales in from 96%.

• The dialog is full-width with 16px gutters on phones, 576px max on desktop.
• The ⌘K hint hides below 640px.

• Scoring runs on every keystroke over label, description and keywords; fine up to a few thousand items.
• Scrolling keeps the active row visible by moving only the list, never the page.

• Put synonyms in keywords instead of the label.
• Item ids must be unique across groups.