Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Dashboard blocks

Pro

Search Analytics Dashboard Block for React Aria

Site search terms listed as top, no results or rising, with searches as a bar, the change from the last period and results returned; a synonym band for each failing term lowers the no-results rate.

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.
Get ProSign in
Have Pro already? Sign in to open it.Opens here as soon as you're Pro.

Overview

Find the searches that fail and fix them with this search analytics dashboard for React with React Aria. A Toggle Group in the header lists the terms people typed into your site search as Top, No results or Rising. Each ruled row inside the hairline frame shows the term, its searches as a number and a bar, the change from the last period as an arrow and a percent, and how many results it returned. In No results, pressing a term opens a band of three catalogue synonyms. "Add synonym" gives the term that synonym's results, marks it "Fixed in this demo" and lowers the no-results rate in the header sentence, from 8.2% to 7.2% for the first term. Remove puts it back. It's built from Toggle Group, Badge, Button and Guides. For docs, help centres and store search.

FAQ

How do I fill it with my searches?

Edit TERMS: the text, its searches now and before for the two periods, the results it returns, and for failing terms (results 0) the three catalogue synonyms with their result counts. TOTAL_SEARCHES, TAIL_FAILED and CLICK_THROUGH hold the figures for the whole log. The rate, the changes and the sorted lists are worked out from them.

How is the no-results rate worked out?

It's the failing searches divided by all searches: the long tail of failing terms plus every listed term that returns nothing and has no synonym yet. Adding a synonym takes that term out of the sum, and removing it puts it back.

What do the three lists show?

Top is the most searched terms that return results, No results is every term that returns nothing (fixed ones stay at the bottom with an Undo), and Rising is the largest growth against the last period. Each list holds six rows, and the panel keeps its height when you switch.

What stays local, and how do I wire it for real?

Everything: the searches are typed and a synonym lives in the page until it reloads. To wire it, send the add and remove actions to your search engine's synonym API, then refetch the log so the rate comes from real counts.

How does it look on a phone?

Each row becomes three short lines: the term with its result count and change, then the searches bar. The Undo action moves to the synonym band, where Remove does the same.

All 200 dashboard blocks