Citations

Numbered sources for a generated answer. A marker is a real anchor with an accessible name, because a bare superscript "3" is meaningless read aloud — exactly when checking a claim matters most.

src/components/ui/citations.tsx

About

From the component's own source, where it was written.

Numbered sources for a generated answer.

A citation marker is a link to something the reader can verify, so it is a real anchor with an accessible name — "Source 3: Tailwind v4 release notes", not a bare "3". A superscript number alone is meaningless read aloud, which is exactly the case where checking a claim matters most.

The hover preview is supplementary. Everything it shows also appears in the source list, because hover is not available to every reader.

scope namespaces the anchor ids. Two answers on one page each carry their own source list, and without a scope both would mint #citation-3 — giving duplicate ids and markers that jump to the wrong list.

Install

npx astralyx-ui add citations

Usage

import { Citations, CitationMark } from '@/components/ui/citations'

<p>Configuration moved into CSS<CitationMark citation={sources[0]} index={1} />.</p>
<Citations citations={sources} />

Composer

Change the props and the source below follows.

Tailwind v4 moves configuration into CSS1, using custom properties that inherit through the tree2.

Sources

1Tailwind CSS v4 release notestailwindcss.com
2CSS custom propertiesMDN
3CSS Cascade LayersW3C

Props

label

tsx

<p>
  Configuration moved into CSS<CitationMark citation={sources[0]} index={1} />.
</p>
<Citations citations={sources} />

Examples

Answer with sources

tsx

<Citations citations={sources} />

API

Generated from the source, so it cannot fall behind the code. One table per exported component, then hooks, functions and types.

`CitationMark`

The inline marker. index is 1-based to match the list, and the accessible name is "Source 3: <title>".

Extends Omit<ComponentProps<'a'>, 'children'>.

Prop	Type	Default	Description
citation	Citation	required	—
index	number	required	—
scope	string	'citation'	Namespaces the anchor ids. Two answers on one page each need their own, or both mint the same ids and the markers jump to the wrong list.

`Citations`

The numbered list under an answer.

Extends ComponentProps<'section'>.

Prop	Type	Default	Description
citations	Citation[]	required	`{ id, title, url?, snippet?, source? }`.
label	ReactNode	'Sources'	—
scope	string	'citation'	Namespaces the anchor ids. Two answers on one page each need their own, or both mint the same ids and the markers jump to the wrong list.

Types

`Citation`

Field	Type	Description
id	string	—
title	string	—
url?	string	—
snippet?	ReactNode	Shown in a hover preview. Everything it contains also appears in the list, since hover is not available to every reader.
source?	string	—

Behaviour

Topic	Detail	Description
anchoring	automatic	A citation without a URL links to its list entry by id, so the marker always goes somewhere.