Citation Accuracy
AI
Trust
Source reliability indicator showing verification status and accuracy scores for AI citations. Features three reliability levels, progress bar visualization, and verification timestamps.
Preview
High reliability verified citation
Citation Verified
Highly Reliable
95%
Last checked: 3/21/2026, 8:48:00 PM
Reliability Levels
Three source reliability tiers with distinct styling
High Reliability
Citation Verified
Highly Reliable
95%
Last checked: 3/21/2026, 8:48:00 PM
Medium Reliability
Citation Verified
Moderately Reliable
78%
Last checked: 3/20/2026, 8:48:00 PM
Low Reliability
Verification Pending
Low Reliability
52%
Verification States
Verified vs pending verification
Verified
Citation Verified
Highly Reliable
88%
Last checked: 3/21/2026, 8:48:00 PM
Pending Verification
Verification Pending
Moderately Reliable
72%
Props
CitationAccuracy component API reference
| Prop | Type | Default | Description |
|---|---|---|---|
accuracy* | number | — | Accuracy percentage (0-100) |
verified* | boolean | — | Whether the citation has been verified |
sourceReliability | 'high' | 'medium' | 'low' | 'medium' | Source reliability level |
lastChecked | Date | — | Timestamp of last verification check |
className | string | — | Additional CSS classes for the container |
SourceReliability Colors
"high"- Emerald/green styling"medium"- Blue styling"low"- Amber/yellow stylingUsage
Import and implementation example
import { CitationAccuracy } from '@/components/ui/citation-accuracy'
export default function Example() {
const citation = {
source: 'research-paper-2024.pdf',
accuracy: 95,
verified: true,
reliability: 'high',
lastVerified: new Date('2024-12-26')
}
return (
<CitationAccuracy
accuracy={citation.accuracy}
verified={citation.verified}
sourceReliability={citation.reliability}
lastChecked={citation.lastVerified}
/>
)
}This block is self-contained (no UI component dependencies)
Features
Built-in functionality
- Accuracy score: Percentage display with color-coded progress bar
- Verification status: Checkmark or warning icon based on verified state
- Reliability levels: High (emerald), medium (blue), low (amber) styling
- Progress bar: Visual accuracy representation with semantic colors
- Last checked timestamp: Optional verification recency display
- Badge coloring: Accuracy badge color changes at 80% and 60% thresholds
- Dark mode: Full dark mode support
Accessibility
Accessibility considerations
ARIA Attributes
Verification icon communicates status visuallyProgress bar shows accuracy levelBadge displays numeric accuracy percentageKeyboard Navigation
| Key | Action |
|---|---|
| N/A | Component is display-only, no interactive elements |
Notes
- Verification status uses both icon and text label
- Accuracy is communicated numerically in badge
- Reliability level shown in text below title
- Progress bar is supplementary - numeric value is primary
- Consider adding aria-label to progress for screen readers