shadcn.io is not affiliated with official shadcn/ui
No Search Results Empty State Block for React
A docs search palette open on a mistyped query: a drawn magnifier over a blank sheet, Did you mean rows for the three closest pages, results when you choose one, and a Clear search button in the palette's foot.
Installation
Overview
Show a search that found nothing, and what to do next, with this no search results empty state for React with Base UI. It opens from the Docs page of Sleuthbox, a search for a company's docs, whose header holds an outline field with its Ctrl K cap; the page is drawn under a soft scrim inside a hairline frame with a plus mark on each corner. The menu is the catalog Command open on the typed query quarterly revnue reprot: a drawn magnifier over a blank sheet says nothing matched, and under it a Did you mean group lists the three pages whose titles are closest to the typed words, as real rows. Choosing one runs that search and lists its results; choosing a result changes the title of the drawn page. The Shine Button, the only colored control, sits in the menu's foot with the Kbd hints and the count: Clear search empties the field and lists every page. 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 query and results. For documentation sites, wikis and help centres.
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, 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 what you typed in the copy is in the real dialog. In your app keep the dialog and drop the copy.
How are the Did you mean pages chosen?
Each typed word is compared with the words of every page's title and hidden keywords by the number of single-letter changes between them, and a word counts as close when it is within one change (two for words of six letters or more). The three pages with the most close words are offered, best first. "revnue" is one letter from "revenue" and "reprot" two from "report", so Quarterly revenue report comes first. Type your own typo and the suggestions follow.
What stays local, and how do I wire it up?
Everything. The ten pages are typed in the block, choosing a result changes the drawn page's title and says no page loads, and Clear search only empties the field. In your app replace DOCS with your search index (or call your search endpoint from type), offer its own spelling suggestions, and in pick navigate to the page.
What does Clear search do, and why is a palette's button the Shine Button?
It empties the field, lists every page and puts focus back in the field, so the next key goes to the search. It is the one action the empty state offers, which is why it takes the colored button; Enter still chooses the highlighted row. With the field already empty it is quiet and says so.
Is it accessible from the keyboard?
Yes. Type to search, the arrow keys move through the rows, Enter chooses the highlighted one and Escape closes the menu and puts focus on the field; Tab reaches Clear search in the foot; 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 count is spoken once typing pauses.