Question 1

What is a shadcn command palette?

Accepted Answer

A shadcn command palette is the Cmd+K (or Ctrl+K) overlay you see in apps like Linear, Notion, and Raycast — a fast keyboard-driven menu of every action your app can perform, with fuzzy search across actions, settings, and content. It's built on cmdk by pacocoursey, wrapped in shadcn/ui's Command primitive, with optional Dialog or Popover composition. Each example in this gallery is a single self-contained TSX file you can drop into your app and wire to your real action handlers.

Question 2

Are these command examples free?

Accepted Answer

Yes, every command example on shadcn.io is free for personal and commercial use — no attribution requirement, no runtime dependency, no gating. Browse, copy, and ship.

Question 3

What's the difference between Command, Combobox, and Popover?

Accepted Answer

Command is the fuzzy-search PRIMITIVE — an Input + filterable list with keyboard nav. Combobox is Command + Popover composed for picking ONE value to fill a form field. Command palette (the dialog variant in this gallery) is Command + Dialog composed for app-wide actions, usually triggered by Cmd+K. Same primitive, three different compositions for three different jobs.

Question 4

Why use a command palette in my app?

Accepted Answer

Three reasons. (1) Power users who learn Cmd+K become 2-3× faster — every action becomes a 2-3-keystroke search instead of a hunt through menus. (2) It scales: as your app grows, a command palette stays one keystroke away while menus get crowded and unusable. (3) Discovery: the palette doubles as documentation — users browse the available actions while searching. Worth shipping in any app with 30+ distinct actions.

Question 5

Should I open the command palette in a Dialog or a Popover?

Accepted Answer

Dialog (the dialog variant) for app-wide command palettes triggered by Cmd+K — it centers the palette, dims the background, and feels like Spotlight. Popover (the popover variant) for context-anchored commands — "Open command menu for this row", anchored to a specific button. Standard (the standard variant) for inline command rows that don't float. The dialog form is the most common; ship it first.

Question 6

How do I group commands by section?

Accepted Answer

Wrap related items in `<CommandGroup heading="Section">`. cmdk filters across all groups but keeps the headings visible for any group with at least one matching item. Common groupings for app palettes: Recent, Suggestions, Navigation, Actions, Settings, Help. For per-row context palettes, group by action type: Quick Actions, Bulk Actions, Destructive.

Question 7

How do I show keyboard shortcuts next to commands?

Accepted Answer

Render `<CommandShortcut>` inside each CommandItem on the right edge — shadcn ships it styled and right-aligned. Use Kbd-style chips for each modifier + key (e.g. `⌘K`, `⌘⇧P`). Make sure the displayed shortcut matches what your global keydown handler actually triggers — drift between displayed shortcut and real binding is a common bug.

Question 8

How do I install a command example?

Accepted Answer

Run the `npx shadcn@latest add` command shown under the Installation heading on any example's detail page. The CLI copies the example's TSX source into `components/examples/command/…`, plus the shadcn/ui Command primitive (and the cmdk + Radix Dialog dependencies) if you don't already have them.

Question 9

How do I trigger the command palette with Cmd+K from anywhere?

Accepted Answer

Add a global keydown listener in a top-level layout: `useEffect(() => { const fn = (e) => { if ((e.metaKey || e.ctrlKey) && e.key === 'k') { e.preventDefault(); setOpen(true) } }; document.addEventListener('keydown', fn); return () => document.removeEventListener('keydown', fn) }, [])`. Lift the open state to a Zustand / Context store if multiple components need to trigger it.

Question 10

How do I wire commands to async actions (open dialogs, navigate, fetch)?

Accepted Answer

Each CommandItem accepts an `onSelect` handler that fires when the user picks the item. For navigation: call your router (`router.push(href)`). For dialogs: set state (`setShowDialog(true)`). For server actions: call the action and close the palette on success. Always call `setOpen(false)` after onSelect to dismiss the palette — the user has triggered an action, the palette has done its job.

Question 11

Which libraries do command examples depend on?

Accepted Answer

cmdk by pacocoursey (the fuzzy-search engine and Command primitive), Radix UI Dialog (the modal wrapper for the dialog variant), shadcn/ui Command (the styled wrappers generated into your project), Tailwind CSS, and Lucide React (icons inside CommandItem). Optional: a hotkey hook (react-hotkeys-hook) for global Cmd+K binding. React 19 baseline.

Question 12

Are command examples accessible for keyboard and screen reader users?

Accepted Answer

Yes — that's the whole point of a command palette. cmdk handles arrow navigation, Enter to select, Esc to close, and Tab to focus inside the search input. The list uses `role="listbox"` with `role="option"` items. Screen readers announce the active option as users arrow-navigate. The Dialog wrapper traps focus inside the palette while open — exactly what users expect.

Question 13

Can I use these command examples with React Server Components?

Accepted Answer

The Command palette is a client component (it manages search state, selection, and open state). Wrap it inside a Server Component layout and pass the actions array as a prop — fetched on the server, rendered client-side. For role-aware actions (admin sees more commands than viewer), filter the array on the server before passing it down so unauthorized commands never ship to the client.

React Command Examples for shadcn/ui

Browse every command example

Frequently Asked Questions