shadcn.io is not affiliated with official shadcn/ui
Docs Search Command Menu Block for Svelte
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 Svelte with Ark 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 combobox and the first is highlighted when it opens. 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.