shadcn.io is not affiliated with official shadcn/ui
Docs Search Command Menu Block for React
A 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.
Installation
Overview
Search one body of docs with this scoped search command menu for React with Base UI. It opens from the Docs page of Docsheaf, a host for developer documentation, whose header holds an outline field with its ⌘ K cap, and the page is drawn under a soft scrim inside a hairline frame with a plus mark on each corner, its own header search is where the menu hangs. The menu is the catalog Command with four chips, a Toggle Group of All, Guides, Reference and Releases, between the input and the list, each carrying how many pages match what you typed and following it as you type. Each result is the page's title, its path in muted text and one line of the page itself, cut to start near the first match, with every matched word marked. The count of the chosen scope is spoken once typing pauses, and choosing a chip says its name and its count. Choosing a result changes the title of the drawn page and the status line says so; no page loads. 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 with the same results, scope and query. For documentation sites, knowledge bases and help centres with a few kinds of page.
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 drawn inline under the drawn header search, 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 component and share the block's state, so the scope and the text you typed in the copy are 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 do the scopes, the counts and the excerpt work?
foundFor(query, scope) keeps the pages of a scope in which every typed word occurs in the title, the path, the excerpt or the hidden keywords, ignoring case. The chips call it once per scope, so each count follows the query, and the list is the chosen scope's result. windowOf cuts the excerpt to start a little before the first match, with an ellipsis, and the row shows one line of it; every occurrence of every typed word is marked.
What are the chips, and how do I reach them?
A single-choice group that never ends up empty, so one scope is always on; each chip is named with its count ("Guides, 6 results"). Tab moves from the input to the chips and the arrow keys move between them. On a phone they scroll sideways. Choosing one says its name and count in the polite message inside the menu.
What stays local, and how do I wire it up?
Everything. Choosing a result changes the drawn page's title and says that no page loads. In your app replace DOCS with your search index, or call your search endpoint from type and keep its excerpts, and in pick navigate to the page.
Is it accessible from the keyboard?
Yes. Type to search, the arrow keys move through the results, 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 real dialog is named by its title and described by its sentence.
How does it look on a phone?
The copy shown on load docks to the top of the page at full width under the header, so the keyboard does not cover the foot; the chips scroll sideways, the excerpt clamps to one line and the key hints go while the count stays. The real dialog keeps the Command dialog's own phone layout.
Related
- 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
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.
- Pro
Help Center Command Menu
Pages and docsA 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.
- Pro
A workspace's search as a panel in the page: a field in the first band, results grouped as Pages, Documentation, Team and Settings with their counts, arrow keys that walk them, Enter that opens one locally, and an empty state that names the query.
- Pro
Spotlight Command Menu
Search everythingA desktop launcher's search bar shown open across a drawn desktop: apps, files and a web row, tabs that filter by kind, a larger top hit with a one-line preview, and a drawn window that opens on the desktop.
- Pro
Command Palette Navbar
SearchA navbar for a notes app with a field-looking button and a shortcut that open a command palette: recent notes first, then pages, actions and settings in labelled groups, with the keys that work shown beside each row.