Insight Card
Ready
Contextual cards for displaying AI insights, tips, and important information
AI Variant
Gradient background style for AI-related insights and suggestions
AI Suggestion
Based on your usage patterns, we recommend enabling keyboard shortcuts for faster navigation.
Smart Tip
This component automatically adapts its density based on available space.
Press Cmd+K to open the command palette for quick actions.
All Variants
Four semantic variants for different contexts
AI Insight
The AI variant uses a gradient background from indigo to teal.
Information
Use the info variant for general tips and helpful information.
Success
The success variant indicates positive outcomes or confirmations.
Warning
Use warning for important notices that need attention.
Without Title
Compact insights without a title for inline tips
AI-powered suggestions will appear here based on your context.
You can hover over any element to see more details.
Custom Icons
Override the default icon with any Lucide icon
Performance Boost
Enable caching to improve load times by up to 60%.
Security Check Passed
All security requirements have been met.
Quick Start
Get started in under 5 minutes with our setup wizard.
Usage
Basic implementation examples
import { InsightCard, AIInsightCard } from '@/components/ui/insight-card'
import { Check, Zap } from 'lucide-react'
// AI variant with gradient background
<InsightCard variant="ai" title="AI Suggestion">
Based on your patterns, we recommend...
</InsightCard>
// Convenience wrapper for AI insights
<AIInsightCard title="Smart Tip">
This uses the Lightbulb icon by default.
</AIInsightCard>
// Other variants
<InsightCard variant="info" title="Tip">
Helpful information here.
</InsightCard>
<InsightCard variant="success" title="Complete">
Operation successful.
</InsightCard>
<InsightCard variant="warning" title="Attention">
Important notice.
</InsightCard>
// Custom icon
<InsightCard variant="ai" icon={<Zap className="w-5 h-5" />}>
Custom icon example.
</InsightCard>API Reference
InsightCard component props
| Prop | Type | Default | Description |
|---|---|---|---|
| variant | 'ai' | 'info' | 'success' | 'warning' | 'ai' | Visual style variant |
| title | string | - | Optional title text |
| icon | ReactNode | Variant default | Custom icon element |
| children | ReactNode | - | Card content |
| className | string | - | Additional CSS classes |
Features
Built-in functionality
- 4 variants - AI (gradient), info, success, warning
- Default icons - Each variant has a semantic default icon
- Custom icons - Override with any Lucide icon
- Optional title - Use with or without a title
- AI-first design - Gradient style matches AI component patterns
- AIInsightCard wrapper - Convenience component with Lightbulb icon