Citation Sources

AI chats

About

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.

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Citation Sources to your project and fits it to your theme.

Code

How Citation Sources is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

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>
  );
}