Interactive DataCard
Interactive KPI card for Framer with animated counter, line/bar/donut charts, hover insights, flexible data input, and drop-ready defaults for dashboards.
Make it with Workshop
Build your own component with AI
About this Component
Interactive Data Card is a modern metric card for Framer. It includes an animated number, three chart styles (Line, Bar, Circle), and smooth hover details. Perfect for dashboards, product landing pages, and analytics sections.
Key Features
3 chart styles: Line (with optional smoothing), Bar, Circle
Animated numbers with smooth transitions
Hover details showing latest value and trend badge
Flexible setup: type numbers manually or add a sequence
Auto value from the last number
Fully customizable: accent color, background, text, radius, shadow
Accessible: keyboard friendly, clear labels, focus support
Optimized for smooth performance
Ready-to-use defaults: looks great right away
Ideal Use Cases
Metric highlights on modern websites
In-app dashboards and management pages
Marketing status sections
Lightweight reporting blocks without complex charts
How to Use
Drag the card onto your canvas.
Choose the number source: manual entry or add a sequence.
Pick chart style: Line, Bar, or Circle (with thickness control).
Turn on Auto from Data to show the last point as the main number.
Adjust visuals: colors, text, radius, shadow.
Edit title, unit, description, and hover details.
