Interactive DataCard

Interactive Data Card is a modern metric card for Framer.

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.