shadcn.io is not affiliated with official shadcn/ui
Search Configuration Settings Block for Solid
A fixed-height window that tunes search live: three field-weight sliders, a typo tolerance choice and synonym pairs beside a ranking of six products for the query tee, with a computed score and an arrow for each product that has moved.
Installation
Overview
Let people tune search and see the ranking move, with this search configuration window for Solid with Ark UI. In a hairline frame with a plus mark on each corner, a rail of controls sits beside a live ranking. The rail has three Sliders for how much a match counts in the title, the tags and the body (0 to 10), a Segment Group for typo tolerance (Off, Low or High, with a line saying what each does) and a Tags Input for synonym pairs such as "tee = t-shirt". The pane beside it ranks six products for the query "tee": each row shows its place, its name, its score worked out from those settings, a bar and the fields it matched in, and an arrow with a number for every product that has moved since the saved settings. Moving a slider, changing the tolerance or adding a pair re-ranks at once; the status line at the foot counts the unsaved changes and names the top result. The top bar's one Shine Button saves the tuning in the page and makes it the new baseline for the arrows, and an outline Button in the results header discards it. On a phone the ranking sits above the controls, so every change shows as you make it. It's built from Slider, Segment Group, Tags Input, Button, Shine Button and Guides, with a CSS entrance only. For site search, catalog search and any ranking you can steer.
FAQ
How is a score worked out?
For each of the three fields, the best match any of its words has with the query or a synonym of it, from 0 to 1, times that field's weight, and the three are added. A word that is the query scores 1, a synonym 0.85, a word one letter off 0.5 when typo tolerance is Low or High, and a word that starts with the query 0.4 when it is High. So with the defaults a title match is worth up to 8, a tag match 5 and a body match 2. Equal scores keep the catalogue's order. The scoring is a plain function over the typed products and is shown to one decimal.
What do the arrows mean?
Each arrow compares a product's place now with its place under the saved settings: an up arrow and a number for places gained, a down arrow for places lost, nothing for a product that has not moved. Saving makes the current ranking the baseline, so the arrows clear. They are announced in words ("Up 2 places") for a screen reader, and the rows themselves never move in the page: a product changes place by its text changing in a fixed row.
How do synonym pairs work?
A pair works both ways: "tee = t-shirt" lets a search for tee match t-shirt and the other way round. Type a pair and press Enter to add it; the field accepts two words and an equals sign, in either case, and turns away anything else or a pair that is already there, saying why under the field. Remove a pair with its x and the ranking drops the products that only it matched.
How do I use my own products and query?
Edit CATALOG: each product has an id, a title, its tags and a body. QUERY is the query the ranking is for, SAVED the tuning the account has stored when the page opens, and TOLERANCES the three levels with the line shown for each. For a real index, replace scoreOf with your engine's own scoring, or call it for the top results of a real query.
What stays local?
Everything: the six products and the scoring are typed, nothing is indexed and nothing is sent. Save keeps the tuning in this page and says so. To make it real, send the weights, tolerance and synonyms to your search service when saving, and re-run a sample query against it to fill the ranking, so what you see is what searchers get.
How does it look on a phone, and with a keyboard?
The window keeps its height. The ranking is a compact list at the top, one line for each product, and the controls scroll under it, so a slider can be dragged with the result in view. Tab goes through the controls, then to the ranking, which can be scrolled with the arrow keys.