shadcn.io is not affiliated with official shadcn/ui
Global Search Panel Block for React
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.
Installation
Overview
Put the search in the page, where people already are, with this global search panel for React with Base UI. It belongs to Loomhollow, a workspace for design studios, and it is not a menu over the page: a header with the product's name and one sentence sits over one framed panel, with a plus mark on each corner, whose first band is the search field. Under it the results are lists, Pages, Documentation, Team and Settings, each with its count at the end of its heading, and each result an icon tile (initials for a person), a title with the letters that matched marked, and the place it lives: a path, a person's role, a guide's length. Press the Down arrow in the field and focus moves to the first result; the arrows walk the results across the groups, Home and End jump to the ends, and Up from the first result returns to the field. Enter opens the focused result and Escape clears the query. The status line at the foot counts what was found once typing pauses, and after Enter says what was opened and that nothing loads. A query that finds nothing says so in the same box, with the query in it and a Clear search button, built on the Empty state. The box keeps its height and scrolls. For admin consoles, workspaces, intranets and any app whose search is a page of its own.
FAQ
How is this different from a command menu?
It is part of the page, not a layer over it: no scrim, no dialog, no focus trap, no shortcut that opens it, and it keeps its place while you read the page around it. Its results are plain lists of buttons, grouped, with the place of each result under its title, and keyboard movement is a roving focus over those buttons instead of a highlight inside the field. Use it when search is a destination (a search page, a settings pane); use a command menu when search is a way of going anywhere from anywhere.
How do the arrow keys work?
A listener on the panel reads the arrow keys from the field and from any result. Down from the field focuses the first result, Down and Up move through the results in the order they are on screen, Up from the first goes back to the field and Home and End jump to the ends. Only one result is a tab stop at a time (the one last focused, or the first), so Tab goes from the field to Clear and to the results once, never through all of them.
What stays local, and how do I wire it up?
Everything. Opening a result marks it Opened and says, in the status line, what it was and that nothing loads. In your app replace HITS with your search endpoint's results grouped by type, keep foundFor for the instant, local filtering of what you already have, and in open navigate to the result. Enter in the field opens the top result, as the status line says.
Is the count really spoken?
Yes, once typing pauses for about half a second, never on every key: the status line is a polite live region present from load, and it says "2 results for “bill”." after a pause and what was opened after Enter. The newest of the two is what it shows.
What does a query with no result do?
The box keeps its height and shows the Empty state: "Nothing for “zzz”", a sentence on what to try and a Clear search button, and the status line says the same in one line. Clear search puts the field and the results back. The Clear button beside the field is always there; with nothing typed it says there is nothing to clear.
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.
- 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
Searchable Catalogue Table
Sort and searchA library catalogue table with a search field and an availability menu: typing keeps the titles whose name or author holds the words and marks them, the foot says how many match, and an empty state under the head clears the search.
- Pro
Recent Items Command Menu
Search everythingA project hub's command menu shown open on what you opened lately: Today, Yesterday and Earlier buckets before you type, recent matches first when you do, opening a row moves it to the top, and a last row clears the list.
- 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.