Source Citation
Display source citations with confidence scores, credibility indicators, and formatted references. Inspired by Perplexity's citation pattern for AI-generated content.
Inline Citations
Citations appear as superscript numbers within text. Hover or click to see source details.
Artificial intelligence has shown remarkable potential in healthcare applications[1]. Recent implementations of machine learning models have demonstrated significant improvements in diagnostic accuracy[2].
Following established engineering best practices[3] ensures code quality and maintainability. The community has also contributed valuable insights on modern React patterns[4].
import { SourceCitation } from '@/components/ui/source-citation'
const source = {
title: 'The Impact of AI on Modern Healthcare',
author: 'Dr. Sarah Johnson',
date: '2024-01-15',
url: 'https://example.com/ai-healthcare',
credibility: 'peer_reviewed',
excerpt: 'Recent studies show that AI-assisted diagnostics...',
}
// Inline citation within text
<p>
AI has shown remarkable potential in healthcare
<SourceCitation
number={1}
source={source}
format="APA"
onCopy={(citation) => console.log(citation)}
/>
.
</p>Sidebar Citations
Card-style citations for sidebar reference lists or bibliography sections.
References
The Impact of AI on Modern Healthcare
Dr. Sarah Johnson · 1/15/2024
“Recent studies show that AI-assisted diagnostics improve accuracy by up to 23% compared to traditional methods.”
Machine Learning Best Practices
Michael Chen · 12/10/2023
“Implementing proper cross-validation techniques is essential for building robust machine learning models.”
Internal Engineering Guidelines
Engineering Team · 2/1/2024
“All new features must undergo code review and pass automated tests before merging to main branch.”
Community Blog Post on React Patterns
Anonymous Developer · 1/20/2024
“Using custom hooks can significantly reduce code duplication in React applications.”
import { SourceCitation } from '@/components/ui/source-citation'
// Sidebar variant for reference lists
<div className="space-y-4">
<h3>References</h3>
<SourceCitation
variant="sidebar"
number={1}
source={source}
format="APA"
onCopy={(citation) => console.log(citation)}
/>
</div>Credibility Indicators
Different visual indicators for source credibility levels help users assess reliability.
Verified Research Paper
Academic Institution · 1/15/2024
“This source has been verified by our editorial team.”
Peer-Reviewed Journal Article
Dr. Jane Smith · 1/10/2024
“Published in a peer-reviewed academic journal.”
Internal Company Documentation
Engineering Team · 2/1/2024
“Internal documentation from our organization.”
Standard Web Article
John Doe · 1/20/2024
“A standard article from a reputable source.”
Unverified Blog Post
Anonymous · 1/25/2024
“Content from an unverified or anonymous source.”
import { SourceCitation } from '@/components/ui/source-citation'
// Credibility levels
const source = {
title: 'Source Title',
author: 'Author Name',
date: '2024-01-15',
url: 'https://example.com',
credibility: 'verified', // verified | peer_reviewed | internal | standard | unverified
excerpt: 'Brief excerpt from the source...',
}Citation Formats
Support for multiple academic citation styles: APA, MLA, and Chicago.
APA Format
The Impact of AI on Modern Healthcare
Dr. Sarah Johnson · 1/15/2024
“Recent studies show that AI-assisted diagnostics improve accuracy by up to 23% compared to traditional methods.”
MLA Format
The Impact of AI on Modern Healthcare
Dr. Sarah Johnson · 1/15/2024
“Recent studies show that AI-assisted diagnostics improve accuracy by up to 23% compared to traditional methods.”
Chicago Format
The Impact of AI on Modern Healthcare
Dr. Sarah Johnson · 1/15/2024
“Recent studies show that AI-assisted diagnostics improve accuracy by up to 23% compared to traditional methods.”
import { SourceCitation } from '@/components/ui/source-citation'
// Different citation formats
<SourceCitation number={1} source={source} format="APA" />
<SourceCitation number={2} source={source} format="MLA" />
<SourceCitation number={3} source={source} format="Chicago" />Props
Complete API reference for the SourceCitation component.
| Prop | Type | Default | Description |
|---|---|---|---|
| number | number | required | Citation number |
| source | SourceData | {} | Source metadata (title, author, date, url, etc.) |
| variant | "inline" | "sidebar" | "inline" | Display style of the citation |
| format | "APA" | "MLA" | "Chicago" | "APA" | Academic citation format |
| showPreview | boolean | true | Show preview popup on hover (inline variant) |
| onCopy | (citation: string) => void | - | Callback when citation is copied |
SourceData Type
| Property | Type | Description |
|---|---|---|
| title | string | Title of the source |
| author | string | Author name |
| date | string | Publication date (ISO format) |
| url | string | URL to the source |
| credibility | "verified" | "peer_reviewed" | "internal" | "standard" | "unverified" | Credibility level of the source |
| excerpt | string | Brief excerpt or quote from the source |
Features
Academic Citations
Automatically formats citations in APA, MLA, or Chicago style with one-click copying.
Credibility Indicators
Visual badges show source credibility: verified, peer-reviewed, internal, standard, or unverified.
Source Preview
Hover over inline citations to see a preview with title, author, excerpt, and formatted reference.
Accessibility
Full keyboard navigation support with ARIA labels for screen readers.