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>
);
}
More by redrob-labs
View all
Alert
17
Schedule Picker
15
Hero Section
7
Switch
4
Status Card
4
Meter
2
Memory Scope
2
Accordion
2
More in AI chats
View all
AI Actions
317
Agent Chat
17
Approval Card
12
Color Picker
73
Message
48
AI Prompt Composer with Model Selector
24
AI Task List
158
Modal Card
98
