Command Palette
Put every page and action one keystroke away: open it with ⌘K, type a few letters, press Enter.
Installation
You can add the command palette using our CLI or manually:
Dark mode ready - this component follows BoardUI semantic tokens automatically. Set up theme switching.
The CLI copies the component source (with its internal dependencies) into your project and installs any required npm packages.
npx boardui@latest add command-paletteUsing a shared UI package or custom import aliases? Configure your installation paths before running the CLI. Copy-paste examples use the default imports.
Anatomy
It is the component search this site opens from Quick Search: a search row over a scrolling list and a footer of keyboard hints, in a panel that lifts in from a soft blur.
Group commands with CommandPaletteSection and write each as a CommandPaletteItem with an optional icon, description, and keyboard shortcut. onAction receives the id of the command that ran, after the palette closes.
⌘K or Ctrl+K opens and closes it from anywhere on the page. Change the letter with shortcut="j", or turn it off with shortcut={false}.
Your own search
Items filter by their text with a contains match that ignores case and accents. To rank results yourself, or fetch them, control the query with inputValue and onInputChange, set filter={null}, and render only the matches.
const [query, setQuery] = useState("");const results = useMemo(() => rank(customers, query), [query]);
<CommandPalette isOpen={open} onOpenChange={setOpen} shortcut={false} aria-label="Find a customer" placeholder="Search customers…" inputValue={query} onInputChange={setQuery} filter={null} // the children are already filtered emptyState="No customers match."> {results.map((customer) => ( <CommandPaletteItem key={customer.id} id={customer.id} textValue={customer.name} description={customer.city}> {customer.name} </CommandPaletteItem> ))}</CommandPalette>Right-to-left
Inside DirectionProvider, the palette carries the direction into its portal. Translate the placeholder, empty state, and footer with the rest of your copy.
import { DirectionProvider } from "@/components/foundations/direction/direction";
<DirectionProvider locale="ar"> <CommandPalette isOpen={open} onOpenChange={setOpen} aria-label="لوحة الأوامر" placeholder="اكتب أمرًا أو ابحث…" emptyState="لا توجد نتائج" footer={<span>استخدم الأسهم للتنقل وEnter للتنفيذ</span>} > … </CommandPalette></DirectionProvider>Keyboard and accessibility
Focus stays in the search field while Up and Down move the highlight through the list, and Enter runs the highlighted command. Escape clears the query first, then closes the palette, and focus returns to where it was. Screen readers hear the highlighted command as it changes.