Citation Popover UIPro
A citation marker that shows the passage it came from — fixed positioning that survives a scrolling answer, touch and keyboard, and an honest state for a number the model invented.
The implementation stays private
This public build contains the product description, API shape and production guidance, but not a second copy of the paid component. Pro members can inspect, copy and install the complete source below.
Component source
Single-file React + Tailwind component, no dependencies. Included with Pro — the source and its install command unlock together.
185 lines of source, included with Pro
The preview above is the real component. Pro unlocks its source, the shadcn install command, and every other Pro item — $49 once.
When to use it
- Pass the passage, not a passage id. The component's job is to show the text the claim came from, and a lookup by id is one more place for the answer and the sources to disagree.
- Slice the passage out of the document with the offsets you carried through retrieval. Storing the text alongside the offsets means the two can drift, and the drift is invisible until someone clicks.
- Leave `passage` undefined for a number that was not retrieved. It is a real outcome, not a loading state — the model will occasionally cite a passage it was never given.
- Send the sources down the stream before the first token, so a marker resolves the moment it arrives rather than after the answer settles.
- Give `onJump` a destination only when there is a document pane on screen. Without one, the popover is the whole affordance and a click that goes nowhere is worse than no click.
What breaks in production
- Positioning the panel absolutely inside the answer. The answer is a scroll container, and the panel gets clipped by it the first time a citation lands near the bottom.
- Opening on hover only. On a phone there is no hover, and the citation becomes text nobody can check.
- Repositioning the panel as the page scrolls. It was measured from a rect that has moved; closing is what the reader expected, following the text around is motion they did not ask for.
- Rendering an empty popover for an unresolved number. That launders a hallucinated citation into a real-looking one — the state the reader most needs to see becomes the state that looks most normal.
- Replacing the number with an icon or a superscript glyph. The number is what the reader matches against the source list, and it is the same character the model wrote.
Related Components
A cited source as a card — favicon, page title, domain, and the snippet the answer actually drew from.
The passages retrieval actually returned, with similarity scores and a visible relevance floor — including the case where nothing cleared it.
Inline citation markers in generated text — numbered footnotes that reveal the source in a hover preview card.
The message input at the heart of an AI chat app — file attachments, model picker, tool toggles, voice, and a send button that turns into stop.