shadcn.io is not affiliated with official shadcn/ui
Scope Counts Empty Search Error Block for React
A docs search page for a query that finds nothing in the current scope: a large query field over five scopes with live counts, results for the scope you choose, and one button to search everything.
Installation
Overview
Show where results are when they are not here, with this scope counts search page for React with Base UI. It's the docs of Quayline, a payments API: a whole page with the page's rails and one band across it, a centred column. A large Input holds the query ("webhook retries") over a strip of five scopes on shared hairlines (Guides, Reference, Community, Changelog and Everything), each a native radio with its own count worked out from a typed index of 36 pages. The heading and the results band follow the chosen scope: in Guides nothing matches, so the page says which scopes do (6 in Reference, 11 in Community, 2 in Changelog); in any other scope it lists its first three pages. Editing the query recounts every scope, and the one Shine Button, Search everything, is the way wider. It's built from Input, Empty, Shine Button and Guides, with a CSS entrance only. For documentation, help centers and any search that is split into scopes.
FAQ
How does the matching work?
A page matches when every word of the query appears in its title, with case and accents ignored. A pure function counts the typed index per scope, and the heading, the strip, the list and the button label all read those counts. Try webhook alone, or retries, and the scopes recount. Replace it with your search service: ask it for a count per scope and the first results of the scope you are in.
Are the scopes real controls?
Yes: a native radio group, so Tab enters it and the arrow keys move between the scopes, each cell naming its scope and its count. The chosen cell is marked by a heavier edge and a bolder name, never only a color.
What stays in the page?
All of it: the index, the counts and the results are typed in the file, nothing is fetched, and the results link to #. The result count is spoken in the polite status line once you stop typing (after about 600 milliseconds), and at once when you change the scope or press Search everything.
Does the page move when the results change?
No. The empty message and the list of three pages share one fixed-height box, the unchosen one unseen, each result row is a fixed height with a two-line title, and the heading keeps its width, so the field and the strip stay in place.
Related
- Pro
Filter Overlap Empty Results Error
Empty statesA results panel for filters that match nothing: three toggle chips over 24 kits, a table of how many kits each pair of filters shares, the empty pair ringed, and a chip off to bring results back.
- Pro
Search Command 404 Error
Not foundA full-height 404 page for a knitting-pattern library: the display 404, a heading that names the missing address, an inline command list in a framed panel that shows five popular pages and filters ten as you type, and one button to the homepage.
- Pro
404 With Ranked Results Error
Not foundA split 404 page for a developer blog host: the failed address in an editable field with its words as chips, and eight typed articles ranked by shared words with one letter of typo allowed, the matched words marked, re-ranking as you edit.
- 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
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
Expired Holds Empty Cart Error
Empty statesA cart page that is empty because its 30-minute hold ran out: the two released items, one still in stock and one sold out, with Add back, Tell me when it is back, a subtotal and a bar to free delivery.