Components · AI
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';When to use
Reach for this component when…
When not to use
Pick a different component if…
Hover or focus a number to preview its source.
| Prop | Type | Default | Required | Description |
|---|---|---|---|---|
| index | number | — | ✓ | Citation: 1-based number shown in the marker. |
| source | CitationSource | — | ✓ | Citation and SourceChip: `{ title, url, domain?, snippet?, favicon? }`. |
| source.url | 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 sources | 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. |