shadcn.io is not affiliated with official shadcn/ui
Command Menu Features Block for React Aria
A live command menu for a workflow launcher: a search field that filters nine actions in three groups, with a preview pane that shows what the highlighted action will do.
Installation
Overview
A live command menu for React with React Aria. A search field filters nine actions in three groups (Platform, Integrations and Security), each row with an icon and its shortcut, and a preview pane beside the list shows the highlighted action: its icon, a sentence and the three steps it runs. The palette sits in a hairline frame with + marks on its corners and a divider between the list and the preview, and a hint strip under it names the keys and says what was run last. On a phone the preview pane is dropped and the list stands alone. The page's rails and top rule come from the Guides spine. It's built from Command, Badge, Kbd and Guides, with CSS transitions for the entrance and your theme's tokens for every colour. For developer tools, automation products and any page that wants to show a command palette working, not drawn.
FAQ
How do I change the actions?
Edit ACTIONS at the top of the file: each entry has a group, an icon, a label, a shortcut, a text sentence, three steps and a value that identifies it. The preview pane reads those same fields, so a new action needs nothing else.
The groups are listed once in GROUPS, in the order they show: add a new group's name there as well.
How does the preview know which action is highlighted?
React Aria keeps the highlight as virtual focus on an item, so the block watches which item has it and also listens for the pointer, and shows that action. When nothing matches, the pane says so.
What does pressing Enter do?
It selects the highlighted action and writes "Ran" and its name in the strip under the palette, which is a polite live region. That is a stand-in: replace setRan with the call that really starts the workflow.
Does the search field take focus when the page loads?
No. An open command moves focus into its field when it mounts, so the block hands focus back a moment later unless the reader has already moved, and a page that loads this block keeps its own focus and scroll position. Click the field or tab to it and it behaves as any search field does.
How does the search match?
It matches the action's label anywhere in the word, ignoring case, so "sec" finds "Rotate a secret". A group left with no matches disappears, and with no matches at all the list says "No actions found." and the preview pane says so too. The list keeps its height while you type, so nothing below it moves.