Components · AI
Citation
Numbered source markers for running text, with a hover preview, plus SourceChip and SourceList for the sources under a reply.
import { Citation } from '@nexub/react';Usage
Assistant answers built from retrieved documents or web results.
SourceList under the reply, so sources are reachable without hovering.
Ordinary links in prose: use Link.
Footnotes in static content, where a numbered list at the end of the page is enough.
Examples
Cited answer
Hover or focus a number to preview its source.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| indexrequired | number | — | Citation: 1-based number shown in the marker. |
| sourcerequired | CitationSource | — | Citation and SourceChip: { title, url, domain?, snippet?, favicon? }. |
| source.urlrequired | string | — | Linked only if it is http or https. Anything else (javascript:, data:, relative) renders as plain text. |
| source.domain | string | — | Shown instead of the URL’s hostname. |
| source.snippet | string | — | Quoted text shown in the hover preview. |
| source.favicon | string | — | http(s) image URL. Falls back to the domain’s first letter. |
| SourceList sourcesrequired | CitationSource[] | — | Rendered as SourceChips under a "Sources" heading. Scrolls sideways when narrow, wraps from 480px. |
| messages | Partial<CitationMessages> | — | Citation and SourceList: overrides for sources and source(index). |
| safeUrl(url) | (url?: string) => string | undefined | — | The same http(s) check, exported for your own links. |
Accessibility
ARIA roles
Keyboard
- Tab
Focuses a marker and opens its preview.
- Enter
Opens the source in a new tab.
Screen reader
Markers are named "Source 1: <title>", not just the number.
The hover preview repeats the marker’s information; nothing in it is only available on hover.
Notes
Links open in a new tab with `rel="noopener noreferrer"`; favicons load with `referrerPolicy="no-referrer"`.
On iOS & Android
Web only