React Citation / Source Card
An answer with no sources is an assertion; an answer whose every claim links back to a retrieved passage is something a reader can check. This renders the sources with their retrieval scores and pairs with an inline numbered marker, so a claim in the text points at exactly the passage behind it.
EQ-07’s pressure excursion is consistent with turbo pump bearing wear. The SPC record shows three rising violations peaking at 12.4 mTorr, a signature the pump manual attributes to bearing degradation. The unit is also 40 days past its recommended PM interval, so I’d schedule a pump service before the next campaign.
Sources
3internal · last 24h
“3 rule-2 violations between 02:14 and 03:48; peak 12.4 mTorr; trend rising.”
TP-9000 manual · p.42
“Bearing wear presents as a rising current draw and vibration above the warning band.”
maintenance log · 2026-06-11
“EQ-07 turbo pump PM interval: 90 days. Last serviced 130 days ago.”
Installation
Props
| Prop | Type | Description |
|---|---|---|
| sources | Source[] | { id, index, title, type?, snippet?, score?, meta?, url? } |
| activeId | string | Highlighted source id (or null) |
| onActivate | (id) => void | Sync hover/focus with inline markers (id or null) |
| heading | string | List heading (default "Sources") |
Provenance you can follow
Retrieval-augmented answers live or die on whether a reader can trace a claim to its source, so the two pieces are built to work together: <Cite> drops a numbered marker inline, and hovering or focusing it lights up the matching card in the source list — and vice versa, so the link is discoverable from either end. It is the difference between "trust me" and "here, on page 42."
Each source carries a retrieval score rendered as a number and a bar, coloured by strength, because a citation at 63% relevance is a much weaker leg to stand on than one at 94%, and hiding that flatters the answer. The type icon (dataset, PDF, internal doc, web) tells a reader at a glance whether a claim rests on your own measured data or on something the model read on the internet — a distinction that matters enormously in a technical domain.
New components every week
Get the week's new Kelvin UI components and templates in one short email. No spam, unsubscribe anytime.