Citation
Grounded answers cite. Citation is the chip in the sentence, a real
button named "Source n: title" that opens a small Popover with the
source; CitationList is the numbered list under the answer, with the
same numbers. The chip and its popover are phrasing content (a <span>
root, no block elements inside), so it sits inside a <p> and produces
valid HTML with no hydration warning.
import Citation, {CitationList, type CitationSource} from '@zuilib/ai/citation'
Basic
Anchoring
The popover is anchored ('top' by default) and portalled to <body>,
like every anchored Headless UI panel: it leaves the subtree's theme. Pass
anchor={false} to render it in place under the chip instead; the
examples here do, so the panel stays inside the preview.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
indexrequired | number | — | The number in the chip |
sourcerequired | CitationSource | — | {id?, title, url?, snippet?, origin?} |
anchor | PopoverAnchor | false | 'top' | |
className | string | — | Merged onto the chip |
CitationList takes sources: CitationSource[], an optional title
(default "Sources") and className. It is also available as
Citation.List.