shadcn.io is not affiliated with official shadcn/ui
Help Center Command Menu Block for React
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 Base 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 cmdk, whose highlighted value is controlled with value and onValueChange. 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 cmdk listbox; the block turns off its own fuzzy filter and lists the rows itself. The pane is a labelled region that is not read out as you move; the list announces the rows.
Related
- 471Pro
Docs Search Command Menu
Search everythingA docs host's scoped search shown open under the header field: chips for All, Guides, Reference and Releases that carry how many pages match, and results with a path and one line of the page with the matched words marked.
- Pro
Docs Tree Command Menu
Pages and docsAn API docs host's page finder as a command menu shown open on a tree: sections open into indented pages with the arrow keys, typing flattens the tree and matches the headings inside pages, and the foot counts the open sections.
- 333Pro
Global Search Command Menu
Search everythingA company intranet's command menu shown open: one input searches pages, docs, people and tags at once, each type is a group of three matches with a row that opens it in place, and the foot counts the results by type.
- Pro
Command Palette FAQ
SearchA FAQ for a docs host with a working command palette: a search-field button with its shortcut opens a palette of questions by topic, and choosing one opens its row below.
- Pro
Command Palette Dialog
Pickers and searchA docs workspace's command palette shown open over its page: Recent and Pages when the field is empty, and a typed greater-than, at or hash turns it to Actions, People or Pages, each with its own groups and count, and each choice edits the drawn page.
- ⌘⌘?Pro
Keyboard Shortcuts Command Menu
Actions and keysA task app's shortcut sheet as a command menu shown open as a help popover at the corner: a Mac or Windows switch re-labels every key cap, groups fold from their heads, search filters by action name, and a button really copies the list as a Markdown table.