Citation Accuracy
AI
Data Display
Verification
Displays the accuracy and verification status of a citation with a progress bar, reliability indicator, and timestamp.
Built With
2 componentsThis block uses the following UI components from the design system:
High Reliability
Verified citation with high accuracy and reliability
Citation Verified
Highly Reliable
95%
Last checked: 4/16/2026, 11:55:54 AM
Medium Reliability
Verified citation with moderate reliability
Citation Verified
Moderately Reliable
72%
Last checked: 4/16/2026, 11:55:54 AM
Low Reliability
Unverified citation with low reliability
Verification Pending
Low Reliability
45%
Last checked: 4/16/2026, 11:55:54 AM
Comparison
All reliability levels side by side
Citation Verified
Highly Reliable
95%
Last checked: 4/16/2026, 11:55:54 AM
Citation Verified
Moderately Reliable
68%
Last checked: 4/16/2026, 11:55:54 AM
Verification Pending
Low Reliability
32%
Props
Component API reference
| Prop | Type | Default | Description |
|---|---|---|---|
accuracy | number | — | Accuracy percentage from 0 to 100 |
verified | boolean | — | Whether the citation has been verified |
sourceReliability | 'high' | 'medium' | 'low' | 'medium' | Source reliability level |
lastChecked | Date | — | When the citation was last verified |
className | string | — | Additional CSS classes |
Usage
Import and implementation example
import { CitationAccuracy } from '@/components/ui/citation-accuracy'
export default function Example() { return ( <CitationAccuracy accuracy={92} verified={true} sourceReliability="high" lastChecked={new Date('2024-03-15T10:30:00')} /> )}Features
Built-in functionality
- Three reliability levels: High (green), medium (blue), and low (amber) with distinct colors
- Verification status: Check or warning icon based on verified state
- Accuracy badge: Color-coded percentage badge (green >= 80%, amber >= 60%, red < 60%)
- Progress bar: Visual accuracy bar with matching color variant
- Timestamp: Optional last-checked date display
- Ref forwarding: Supports React ref forwarding
Accessibility
Accessibility considerations
ARIA Attributes
Verification icon provides visual status cueAccuracy percentage is displayed as textKeyboard Navigation
| Key | Action |
|---|---|
| N/A | Non-interactive display component |
Notes
- Status is conveyed through icon, color, AND text for redundancy
- Progress bar provides visual representation of accuracy
- Reliability label is shown as text alongside the color indicator