About
An inline pill-shaped link that marks where a piece of AI-generated text or data came from, so a reader can jump straight to the source.
Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Citation to your project and fits it to your theme.
Code
How Citation is used: the demo's code. The component's own source comes with a free account.
Usage.tsx
import Citation from "@/components/ui/citation";
export default function CitationDemo() {
return (
<div className="flex flex-col gap-4 p-6 font-sans text-foreground">
<p className="m-0 max-w-[62ch] text-[15px] leading-[26px]">
Median time to first review fell to 9.2 hours last quarter{" "}
<Citation
index={1}
source="Pipeline report Q3"
href="/records/pipeline-report-q3"
/>
, and offer acceptance held at 86%{" "}
<Citation index={2} source="ATS export" href="/records/ats-export" />.
</p>
<div className="flex flex-wrap items-center gap-4">
<Citation
index={1}
source="Aarav Sharma - CV.pdf"
href="/records/aarav-sharma-cv-pdf"
/>
<Citation
index={2}
source="redrob.co/careers"
href="/records/redrob-co-careers"
/>
<Citation source="Screening notes" href="/records/screening-notes" />
</div>
</div>
);
}