shadcn.io is not affiliated with official shadcn/ui
Help Center Command Menu Block for Ark UI
A messaging app's help centre as a command menu shown open beside an article pane: articles and video tutorials filter as you type, the pane shows the highlighted one's first paragraph, three headings and related reading, and a contact support row is never filtered out.
Installation
Overview
Let people find the answer before they ask with this help centre command menu for React with Ark UI. It opens from the Help page of Plainspoke, a team messaging app, whose header holds an outline field with its ⌘ K cap, and the app is drawn under a soft scrim inside a hairline frame with a plus mark on each corner, a question mark button at the end of its bar. The menu is the catalog Command in two columns: on the start side seven articles, each with its read time, and four video tutorials, each with its length, filtering as you type; on the end side a pane that follows the highlighted row and shows the article's title, its first paragraph, its three headings and what it is related to, so you can tell it is the right one before you open it. The last row, "Still stuck? Contact support", is always there and never filtered out; when nothing matches it carries the line that says so and what to try. Choosing an article names it on the drawn page; choosing support says a message was drafted, not sent. For preview the menu is drawn open in place when the page loads; the field, or Ctrl or ⌘ K while focus is in the block, opens the real command dialog, wider, with the same list and the same query. For apps, help centres and support tools.
FAQ
Why is the menu already open, and what do I keep?
So you can see it without a click. On load the menu is the Command and its pane drawn inline over a picture of the app, in a plain shell that is not modal, so nothing is trapped, hidden or focused and the page around the preview keeps working. The header's field opens the real command dialog, modal, with its focus trap, Escape and focus return, and the inline copy stays closed until a reload. Both show the same Palette and share the block's state, so what you typed in the copy is in the real dialog. In your app keep the dialog and drop the copy: the "in-place" state, the scrim with its shell and the Escape and blur effects.
How does the pane follow the highlight?
The block keeps the highlighted row's id in state and the pane is a plain function of it. The Command is a combobox and reports each highlight through onHighlightChange. When nothing is highlighted, or the highlighted row is gone after you typed, the pane shows the first row.
Why is the support row never filtered out?
Because the person asking has just found out the articles do not cover it. rowsFor always ends with it, and when no article or video matches it is the only row and shows "Nothing matches" and what to try under its title, so the empty state is on every screen, the phone's included. Choosing it drafts a message in your app; here it only says "Message drafted, not sent."
What stays local, and how do I wire it up?
Everything. Choosing a row names it on the drawn page and the status line says nothing loaded or played. In your app replace DOCS with your help index (the pane needs an intro and the headings, which most help systems already have) and, in pick, navigate to the article or open your support form.
Is it accessible from the keyboard?
Yes. Type to search, the arrow keys move through the rows, Enter opens the highlighted one and Escape closes the menu and puts focus on the field; Ctrl or ⌘ K opens the dialog while focus is inside the block, and only then. The rows are options of a combobox and the first is highlighted when it opens. The pane is a labelled region that is not read out as you move; the list announces the rows.