Source Citation
Display source citations with confidence scores, credibility indicators, and formatted references. Inspired by Perplexity's citation pattern for AI-generated content with full transparency.
Preview
Inline citations appear as superscript numbers. 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].
Variants
Different display styles for various contexts
Inline Variant
This is inline text with a citation[1]that appears as a superscript.
Sidebar Variant
The Impact of AI on Modern Healthcare
Dr. Sarah Johnson · 2024-01-15
“Recent studies show that AI-assisted diagnostics improve accuracy by up to 23% compared to traditional methods.”
Credibility Indicators
Visual indicators for source credibility levels
The Impact of AI on Modern Healthcare
Dr. Sarah Johnson · 2024-01-15
“Recent studies show that AI-assisted diagnostics improve accuracy by up to 23% compared to traditional methods.”
Machine Learning Best Practices
Michael Chen · 2023-12-10
“Implementing proper cross-validation techniques is essential for building robust machine learning models.”
Internal Engineering Guidelines
Engineering Team · 2024-02-01
“All new features must undergo code review and pass automated tests before merging.”
Community Blog Post on React Patterns
Anonymous Developer · 2024-01-20
“Using custom hooks can significantly reduce code duplication in React applications.”
Citation Formats
Support for APA, MLA, and Chicago citation styles
APA Format
The Impact of AI on Modern Healthcare
Dr. Sarah Johnson · 2024-01-15
“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 · 2024-01-15
“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 · 2024-01-15
“Recent studies show that AI-assisted diagnostics improve accuracy by up to 23% compared to traditional methods.”
Props
SourceCitation component API reference
| Prop | Type | Default | Description |
|---|---|---|---|
number* | number | — | Citation number |
source | SourceData | {} | Source metadata object |
variant | 'inline' | 'sidebar' | 'inline' | Display variant |
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
| Prop | Type | Default | Description |
|---|---|---|---|
title | string | — | Title of the source |
author | string | — | Author name |
date | string | — | Publication date (ISO format) |
url | string | — | URL to the source |
type | string | — | Source type |
credibility | 'verified' | 'peer_reviewed' | 'internal' | 'standard' | 'unverified' | — | Credibility level |
excerpt | string | — | Brief excerpt or quote |
Usage
Import and implementation example
import { SourceCitation } from '@/blocks/ai-transparency/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...',
}
export default function Example() {
return (
<>
{/* 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 variant for reference lists */}
<div className="space-y-4">
<h3>References</h3>
<SourceCitation
variant="sidebar"
number={1}
source={source}
format="APA"
/>
</div>
</>
)
}Features
Built-in functionality
- Academic citation formats: Automatically formats in APA, MLA, or Chicago style
- Credibility indicators: Color-coded badges: verified, peer-reviewed, internal, standard, unverified
- Source preview: Hover over inline citations to see title, author, excerpt
- One-click copy: Copy formatted citation to clipboard
- External links: View Source button opens source URL in new tab
- Inline and sidebar variants: Superscript for text, card for reference lists
- Dark mode: Full dark mode support
Accessibility
Accessibility considerations
ARIA Attributes
Inline citation has role="button" and aria-labeltabIndex={0} for keyboard focusExternal links have rel="noopener noreferrer"Keyboard Navigation
| Key | Action |
|---|---|
| Tab | Focus citation button |
| Enter / Space | Toggle citation preview popup |
Notes
- Credibility level shown in text, not just color
- Author and date displayed in readable format
- Copy button provides visual feedback on success
- Preview popup accessible on hover and click