Command Palette

Keyboard-first command menu for pages, actions, and theme switching.

Installation

npx shadcn@latest add @iconiq/command-palette

9 props

Keyboard-first command menu built on Radix Dialog with grouped items, fuzzy search, arrow-key navigation, and optional built-in theme actions.

groupsCommandMenuGroupDef[]

Default[]

Grouped command items. Each group has a heading and an items array with label, optional href or action, icon, keywords, and description.

showThemeGroupboolean

Defaulttrue

When true, appends Light, Dark, and System theme actions that call next-themes setTheme.

placeholderstring

Default"Search components, pages, actions…"

Placeholder copy for the search field.

shortcutKeystring

Default"k"

Letter used with Cmd on macOS or Ctrl elsewhere to toggle the palette globally.

contentDelaynumber

Default150

Milliseconds to wait before revealing the results panel after the dialog opens.

triggerReact.ReactNode

Custom trigger node. When provided, it replaces the default search button and receives an open handler.

triggerPropsCommandMenuTriggerProps

Props for the default trigger button, including label, shortcut badge visibility, and className.

classNamestring

Merged onto the dialog content panel.

emptyMessagestring

Default"No results found."

Copy shown when the current query matches no items.

Notes

Items with href navigate through Next.js router.push. Items with action run a callback and close the palette.

Search matches every whitespace-separated term against the label, description, and keywords haystack.

The palette closes automatically on route changes when used inside a Next.js App Router app.

Requires next-themes ThemeProvider when showThemeGroup is enabled.