React Semantic Search Results

Search ranked by meaning, not keyword overlap — and honest about it. The score bar shows how close each hit is, and the “matched on” concepts explain why a result ranked when it shares no words with the query, which is the thing that makes semantic search feel like magic and, without it, feel arbitrary.

Semantic results for “how do I keep my power transistor from overheating”4
  • 1
    Heatsink selection for TO-220 power stagesapp-note

    Thermal resistance budgeting for surface-mount and through-hole power devices under continuous load.

    matched oncoolingthermalpower dissipation
    0.91
  • 2
    Reducing junction temperature in dense layoutsguide

    Copper pour, via stitching, and airflow strategies to keep Tj within the safe operating area.

    matched onjunction temperatureairflow
    0.84
  • 3
    Thermal derating curves explaineddocs

    How to read a derating curve and translate ambient temperature into an allowable current.

    matched onderatingambient
    0.72
  • 4
    MOSFET gate drive basicstutorial

    Gate charge, drive current, and switching loss — the fundamentals of driving a power MOSFET.

    matched onpower MOSFET
    0.48

Ranked by embedding similarity — results can rank highly without sharing any query words.

None of the top results contain the word “overheating” — they rank on meaning, and the “matched on” concepts show why.

Installation

npx shadcn@latest add "http://localhost:3000/registry/semantic-results.json"

Props

PropTypeDescription
querystringThe search query
resultsSemanticResult[]{ id, title, snippet, score, source?, matchedOn? }

Show the score, and the why

Semantic search ranks on embedding similarity, which means a result can top the list without containing a single query word — powerful, and disorienting if the interface doesn't explain it. So each result carries its similarity score as a number and a bar, coloured by strength, and a list of the concepts it matched on. When someone searches "keep my power transistor from overheating" and the top hit is a heatsink app-note that never says "overheating," the matched on chips (cooling, thermal, power dissipation) turn a mysterious ranking into an obvious one.

Honest about the method

A footer states plainly that results are ranked by embedding similarity and can rank highly without sharing query words — because a user who expects keyword search and gets semantic results will think the search is broken unless you tell them otherwise. The score is the model's, shown not hidden, so a low-confidence tail (the 0.48 MOSFET result) reads as exactly that. Pair it with the Faceted Filter for structured narrowing alongside the semantic ranking.

New components every week

Get the week's new Kelvin UI components and templates in one short email. No spam, unsubscribe anytime.