Citation

Footnote-style references that link inline tokens to a list of sources — the pattern AI assistants use to ground answers. Numbering follows source order; markers and footnotes are both fully renderable.

Features

Inline markers auto-number in source order.

Markers link to their footnote and back, with proper ARIA roles.

Render-prop markers and footnotes — show anything you want.

Sensible defaults: a numbered <sup> marker and a title + link footnote.

Unknown ids render nothing — safe against missing sources.

Example

A 200 OK response means the request succeeded¹. Status codes are grouped into five classes, from informational to server error².

Anatomy


import { Citation } from '@wire-ui/react'
 
const sources = [
{ id: 'rfc', title: 'RFC 9110', url: 'https://www.rfc-editor.org/rfc/rfc9110' },
{ id: 'mdn', title: 'MDN — HTTP', url: 'https://developer.mozilla.org/' },
]
 
<Citation.Root sources={sources}>
<p>
A 200 means success<Citation.Ref for="rfc" />. Codes group into five classes
<Citation.Ref for="mdn" />.
</p>
<Citation.List />
</Citation.Root>

Styling

Citation is headless. The inline marker is an <a> with data-citation and a data-index; each footnote is an <li> with data-citation-source and a data-index. Pass a render function to Citation.Ref or Citation.List to fully control the markup, or rely on the defaults.


<Citation.Ref for="rfc" className="
  align-super text-xs font-semibold
  hover:underline
" />

Using data attributes


/* Inline marker */
[data-citation] { vertical-align: super; font-size: 0.7em; }
 
/* Footnote rows */
[data-citation-source] { display: flex; gap: 0.5rem; }
[data-citation-source]::before { content: attr(data-index) "."; }

Root props

Prop	Type	Default	Description
`sources`	`CitationSource[]`	required	Ordered list of sources; numbering follows array order

Root also accepts all native div attributes.

Ref props

Prop	Type	Default	Description
`for`	`string`	required	Id of the source this reference points to
`children`	`ReactNode \| ((props: { source, index }) => ReactNode)`	`<sup>{label}</sup>`	Static content or a render function

Ref also accepts native <a> attributes (except children/href). Renders null when the id is unknown.

List props

Prop	Type	Default	Description
`children`	`(props: { source, index }) => ReactNode`	title + link row	Render a single footnote

List also accepts native <ol> attributes (except children).

CitationSource

Field	Type	Description
`id`	`string`	Stable identifier referenced by `Citation.Ref`’s `for` prop
`label`	`string`	Marker label override; defaults to the 1-based position
`title`	`string`	Human-readable title shown in the footnote list
`url`	`string`	Link to the source
`excerpt`	`string`	Optional excerpt/snippet for the footnote list

Data attributes

Attribute	Element	Values
`data-citation`	Ref	Present (marker)
`data-index`	Ref, List items	1-based position
`data-citation-source`	List items	Present (marker)

Accessibility

Citation.Ref renders an <a role="doc-noteref"> with href pointing to its footnote and aria-describedby linking the two.
Each footnote <li> uses role="doc-endnote" and a generated id so markers can link to it.
Markers and footnotes share a stable id namespace generated per Root instance.