shadcn.io is not affiliated with official shadcn/ui
Command Menu Features Block for Solid
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 Solid with Ark UI. 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 come from each action's group field, so a new group name appears on its own.
How does the preview know which action is highlighted?
The command reports its highlighted item and the block keeps it in state, so the arrow keys and the pointer both move the preview. The first action is highlighted to begin with.
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.