What is a command palette — a search that finds actions, not pages

Where do you switch GitHub to dark theme? Profile settings? The appearance section? The menu under your avatar?

You don't have to remember. Press Ctrl+K, type > and then "theme". A "Switch theme to…" command shows up in the list. Enter — done. You never found out which menu it lives in, and you didn't need to.

That's a command palette. A search that finds not pages or products, but actions. And it has one sneaky weakness — more on that near the end.

What a command palette is

A command palette is a window with an input field that opens with a keyboard shortcut. You type a couple of letters, the list of commands narrows down, and Enter runs the one you picked.

Where you'll meet it:

• VS Code — Ctrl+Shift+P (⇧⌘P on Mac). The editor's docs call it the most important key combination to know: it gives you access to all of its functionality.
• GitHub — Ctrl+K opens search and navigation, Ctrl+Shift+K goes straight to commands. The palette is still in preview and has to be turned on in settings.
• Work web apps — task trackers, note apps, admin panels. For React there's a ready-made component, cmdk, with almost 13 thousand stars on GitHub. Its README is simply titled "⌘K".

How it differs from a menu and a search

It looks like just another search. But each of the three asks its own question.

• A menu asks: "Do you know where this is?" If you don't — go digging through sections.
• A search asks: "What do you want to find?" And it looks through content: articles, products, emails. We covered how to build one in the guide on adding search to your app.
• A palette asks: "What do you want to do?" Create a task, switch the theme, open settings, jump to a project.

That's its main advantage. A menu makes you remember where a feature lives. A palette only needs you to know what you want. Someone opens a complex app for the first time, types "export" — and finds export, even if it's buried in a third-level submenu.

The second advantage: your hands never leave the keyboard. For people who live in an app all day, that saves hundreds of mouse movements.

GitHub adds a third: the palette suggests commands based on where you are. In a repository it offers one set, on a profile another.

How it works inside

A palette is just a list of commands. Each one has:

1. A name — "Switch theme".
2. Synonyms — "dark theme", "night mode", "dark". People call the same thing different names, and the search should match all of them.
3. An action — the function that runs on Enter.
4. A keyboard shortcut, if there is one. It's shown to the right of the name — so the palette teaches shortcuts along the way. Someone opens the theme switcher through the palette five times, notices the key combo next to it, and the sixth time just presses it.

As you type, the code filters this list and moves the best matches to the top. cmdk has filtering and sorting built in, and synonyms go into the keywords prop:

import { Command } from 'cmdk';

<Command.Dialog open={open} onOpenChange={setOpen} label="Commands">
  <Command.Input placeholder="What do you want to do?" />
  <Command.List>
    <Command.Empty>Nothing found</Command.Empty>
    <Command.Item keywords={['dark', 'night mode']} onSelect={toggleTheme}>
      Switch theme
    </Command.Item>
    <Command.Item keywords={['todo', 'ticket']} onSelect={createTask}>
      New task
    </Command.Item>
  </Command.List>
</Command.Dialog>

If you have hundreds of commands with very different names, you can even search by meaning — that's semantic search. But for your first twenty commands, synonyms are enough.

Does your app need one

Here's that weakness: you can't see the palette. A shortcut is an invisible door. If you don't know about Ctrl+K, you'll never open it.

So the rule is simple: a palette is an extra path, not a replacement for the menu. And it needs a visible way in: a magnifier button in the header with a Ctrl K hint next to it.

When it pays off:

• the app is complex — dozens of actions and settings;
• people work in it every day: a task tracker, an editor, a CRM, an admin panel;
• people have a keyboard at hand.

When you don't need it:

• a landing page or a five-page site — everything is already in view;
• a mobile app — there's no keyboard shortcut;
• a service people open once a month: the shortcut simply won't stick.

Where to start: write down the 10–15 actions people do most often. Give each two or three synonyms. That's enough to make the palette useful on day one.

Why is it Ctrl+K that opens the palette?

It's a convention, not a standard: GitHub does it, and so does the example in the cmdk README. Keep in mind the combo can clash with browser or system shortcuts — GitHub warns about exactly that and lets you change the shortcut in settings. Call preventDefault() in your handler.

Is a command palette the same thing as site search?

No. Search finds content — pages, products, messages. A palette finds actions and places inside the app. They're sometimes combined in one window, like on GitHub, but they do different jobs.

Does a command palette work on a phone?

Without a keyboard, its main advantage disappears: you can't press the shortcut, and typing is awkward. If you still need the command list on a phone, open it with a regular button in the interface.