Overview
RecommendationCard displays AI-generated suggestions with confidence levels, expected impact, and actionable buttons. Perfect for presenting AI recommendations in a user-friendly, actionable format.
Features
- Confidence level badges (high/medium/low)
- Expected impact indicators
- Category-based icons
- Action and dismiss buttons
- Three variants: default, compact, prominent
Examples
Basic Card
Simple recommendation
Send reminder to inactive participants
15 participants haven't completed the survey in 7 days. Sending a reminder could increase your response rate by up to 20%.
With Actions
With action and dismiss buttons
Increase response rate
Consider sending a reminder to participants who started but didn't complete the survey. Based on similar surveys, this could recover 30% of incomplete responses.
Confidence Levels
Various confidence levels
High confidence recommendation
Strong historical data supports this action
Medium confidence recommendation
Some data suggests this could be helpful
Low confidence recommendation
Limited data available, but worth considering
Compact Variant
Compact display mode
Close inactive survey
Archive completed project
Prominent Variant
High-visibility display
Critical: Address high drop-off rate
Page 3 of your survey has a 45% drop-off rate, significantly higher than the 15% average. Analysis suggests the question about contact preferences is causing confusion. Consider simplifying the wording or breaking it into multiple questions.
Category Examples
Different category types
Boost engagement
Try adding gamification elements
Improve quality
Review questions with low response variance
Automate workflow
Set up automatic reminders
With ChartCard
Wrapped in ChartCard
Suggestions based on your data
Optimize survey timing
Data shows higher completion rates on Tuesday mornings
Add follow-up question
Users who rated low often have valuable feedback
Props Reference
| Prop | Type | Default | Description |
|---|---|---|---|
title | string | required | Recommendation title |
description | string | required | Detailed description |
confidence | 'high' | 'medium' | 'low' | required | AI confidence level |
impact | 'high' | 'medium' | 'low' | - | Expected impact level |
category | string | - | Category (engagement, quality, automation) |
actionLabel | string | - | Label for action button |
onAction | () => void | - | Handler for action button |
onDismiss | () => void | - | Handler for dismiss button |
variant | 'default' | 'compact' | 'prominent' | 'default' | Visual variant |
isLoading | boolean | false | Loading state |
className | string | - | Additional CSS classes |
Usage
import { RecommendationCard, ChartCard } from '@/ui/components/charts';
// Basic recommendation
<RecommendationCard
title="Send reminder to inactive participants"
description="15 participants haven't completed the survey in 7 days."
confidence="high"
/>
// With impact and actions
<RecommendationCard
title="Increase response rate"
description="Consider sending a reminder to participants who started but didn't complete the survey."
confidence="high"
impact="high"
category="engagement"
actionLabel="Send Reminder"
onAction={() => handleSendReminder()}
onDismiss={() => dismissRecommendation()}
/>
// Compact variant
<RecommendationCard
title="Close inactive survey"
description="Survey has had no responses in 14 days"
confidence="medium"
impact="low"
variant="compact"
onAction={() => closeSurvey()}
actionLabel="Close"
/>
// Prominent variant
<RecommendationCard
title="Critical: Address high drop-off rate"
description="Page 3 of your survey has a 45% drop-off rate..."
confidence="high"
impact="high"
category="quality"
variant="prominent"
actionLabel="View Analysis"
onAction={() => viewAnalysis()}
/>