Three-Level Transparency
AI
Transparency
Progressive disclosure of AI explanations with Simple, Technical, and Expert views. Serves users of all technical levels by allowing them to explore explanations at their comfort level.
Preview
Click the level buttons to switch between explanation depths
Explanation Level
Plain language explanation
The AI recommends option A because it has the highest chance of success based on past data.
Props
ThreeLevelTransparencyCard component API reference
| Prop | Type | Default | Description |
|---|---|---|---|
simple* | string | ReactNode | — | Plain language explanation for general users |
technical* | string | ReactNode | — | Technical details for informed users |
expert* | string | ReactNode | — | Full technical breakdown for data scientists |
defaultLevel | 'simple' | 'technical' | 'expert' | 'simple' | Initial explanation level |
onLevelChange | (level: string) => void | — | Callback when user changes level |
className | string | — | Additional CSS classes |
Usage
Import and implementation example
import { ThreeLevelTransparencyCard } from '@/components/ui/three-level-transparency'
export default function Example() {
return (
<ThreeLevelTransparencyCard
simple="The AI recommends option A because it has the highest chance of success."
technical="Weighted score: A=0.89, B=0.72. Model: XGBoost v2.3 with 15,000 samples."
expert="Feature vector: [user_engagement: 0.92, retention: 0.87]. P-value < 0.001."
defaultLevel="simple"
onLevelChange={(level) => console.log('Level changed:', level)}
/>
)
}This block is self-contained (no UI component dependencies)
Features
Built-in functionality
- Progressive disclosure: Users explore explanations at their comfort level
- Three expertise levels: Simple, Technical, and Expert views
- Icon indicators: Visual icons help identify complexity levels
- One component for all users: Serves simple users and technical experts alike
- Level change callback: Track which level users prefer for analytics
- Animated transitions: Smooth transitions between explanation levels
- Dark mode: Full dark mode support
Accessibility
Accessibility considerations
ARIA Attributes
Level selector buttons are native button elementsCurrent level visually highlighted and accessibleContent changes announced to screen readersKeyboard Navigation
| Key | Action |
|---|---|
| Tab | Navigate between level buttons |
| Enter / Space | Select the focused level |
Notes
- Level labels are descriptive text
- Icons are supplementary, not required for understanding
- Content area has readable text contrast
- Selected state shown by color and focus ring