Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Scope Counts Empty Search Error Block for Svelte

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.

Framework
UI library

Preview

Preview width

Installation

Part of Pro
Pro unlocks the code and one-line install of every Pro button and text effect, plus the MCP for your AI editor.
Have Pro already? Sign in to open it.Opens here as soon as you're Pro.

Overview

Show where results are when they are not here, with this scope counts search page for Svelte 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.

What does Search everything do when everything is already searched?

It stays on screen, quiet, and says so ("Already searching everything.") if pressed, so the page never loses its main button.

How does it look on a phone?

The strip scrolls sideways inside its own box, so each scope keeps room for its name and count, and Search everything is pinned to the bottom of the screen until you reach it.