shadcn.io is not affiliated with official shadcn/ui
Search Results Storefront Block for Solid
A product search results page: a search field, category counts that follow the query, rows with the matched words marked and a drawn thumbnail, a sort menu, a Did you mean offer for slips and an empty state with suggestions.
Installation
Overview
Show a shop's search results the way a shopper reads them, with this results page for Solid with Ark UI. A header names the page, says what Harlow & Birch sells and holds a sort Select (Best match, Price, Name). In a hairline frame with a plus mark on each corner, the first band is an Input Group search field with a Clear button and a polite status line, and the band under it is a Segment Group of categories, each with a count that follows the query. The stage below is a fixed-height band whose rows scroll inside it: a drawn thumbnail, the name and description with the matched words marked, a category Badge and the price. A query is split into words and each word has to match, a match in the name counting more than one in the description. When nothing matches, the stage offers Did you mean from a short typed list of slips ("lenin" for linen) and suggestion buttons, and pressing one runs that search. It's built from Input Group, Segment Group, Select, Badge, Empty, Button and Guides, with a CSS entrance only. For the search page of a shop, a catalog or a help center.
FAQ
How do I fill it with my own products?
Edit PRODUCTS. Each has an id, a name, a description, a category, the price in cents, a drawing and a grey tone for the thumbnail. The categories row is CATEGORIES, and SLIPS maps common misspellings to the word meant. Swap the Art component for an img when you have photographs.
How are results ranked?
The query is lower-cased and split on spaces. A product is in only if every word is found in its name, category or description; each word scores 3 for a name, 2 for a category and 1 for a description, and the scores add up. Best match sorts by that score, then by name; the other sorts ignore it. This is a plain substring search over a small list: for a large catalog run the search on your server and keep only the display here.
What does Did you mean do?
Only when a query finds nothing, each of its words is looked up in SLIPS. If any is a known slip, the stage offers the corrected query as a button, and pressing it runs the search and puts focus back in the field. With no known slip it offers a few suggestions instead. The list is typed, not computed, which is the honest version of a spelling suggester; use your search service's own suggestions in production.
Why does the list scroll inside a box?
The results area has a fixed height, so a long list, a short one or none at all leave the page the same size. The box is a focusable region you can scroll with the arrow keys, and its rows are ordinary links.
What stays local?
All of it: the products are a typed array and the search runs in the browser. Links go to # and nothing is for sale. Wire it by sending the query to your API on each change (debounced) and rendering the response in the same rows.
Is it accessible?
The field and the sort have names, the categories are a labelled group, the status line says how many products match and is a polite live region present from the start, and the marked words are a real mark element rather than a colour, so a screen reader and forced-colors mode both see them. Escape clears the field.