Inline Citation
A claim-adjacent evidence marker for grounded AI content — a compact pill that previews its source on hover and delegates opening to the host.
A claim-adjacent evidence marker for grounded AI content. The compact pill sits inline in the reading flow; hovering or focusing it previews the concrete source — title, location and a bounded excerpt — and clicking delegates navigation to the host via onOpen.
Import
1import { InlineCitation } from "@yuhuanowo/yunui/content";Basic
The pill stays in the text; hover it to see the source preview.
Basic
The Eiffel Tower was completed in 1889
and stands 330 metres tall.
Label & icon
label is the compact text in the pill (a number, a short source name); pass an icon (e.g. a favicon) to prefix it.
Label & icon
Transformers replaced recurrence with self-attention
in 2017.
Opening the source
Pass onOpen to make the pill actionable — it fires on click and reveals an external-link affordance in the preview. Navigation (open a URL, scroll to a document location) belongs to the host.
1<InlineCitation2 label="1"3 title="Eiffel Tower — Wikipedia"4 meta="en.wikipedia.org"5 onOpen={() => window.open("https://en.wikipedia.org/wiki/Eiffel_Tower", "_blank")}6/>Props
| Prop | Type | Default | Description |
|---|---|---|---|
| className | string | — | |
| description | string | — | Bounded source excerpt that substantiates the adjacent claim. |
| icon | ReactNode | — | Optional source icon or favicon. |
| label* | string | — | Compact label shown beside the supported claim. |
| meta | string | — | Exact source location, for example a hostname or PDF page. |
| onOpen | (() => void) | — | Open a document location or external URL. |
| title* | string | — | Full source title shown in the evidence preview. |