shadcn.io is not affiliated with official shadcn/ui
Scope Counts Empty Search Error Block for Solid
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 Solid with Ark 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.