Renders inline numbered citation markers in AI-generated text that show a hover preview card with the source title, domain, and snippet, with an optional footnote list at the bottom.
import { CitationSources } from "@/components/ui/citation-sources";
import type { Citation } from "@/components/ui/citation-sources-utils/types";
const citations: Citation[] = [
{
id: "1",
index: 1,
url: "https://www.nature.com/articles/climate-report",
title: "Global Climate Report 2024",
snippet:
"Annual assessment of global temperature trends and emission trajectories.",
},
{
id: "2",
index: 2,
url: "https://www.ipcc.ch/report/ar6",
title: "IPCC Sixth Assessment Report",
snippet:
"Comprehensive scientific assessment of climate change causes and impacts.",
},
];
export default function CitationSourcesDemo() {
return (
<div className="flex min-h-[400px] w-full items-center justify-center p-8">
<CitationSources
variant="Footnotes"
text="Global average temperatures have risen significantly over the past decade [1]. Scientists project continued warming unless emissions are curbed [2]."
citations={citations}
/>
</div>
);
}
Part of Spectrum UI — browse the full library on 21st.dev.