Interactive DataCard

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

1. Drag the card onto your canvas.

2. Choose the number source: manual entry or add a sequence.

3. Pick chart style: Line, Bar, or Circle (with thickness control).

4. Turn on Auto from Data to show the last point as the main number.

5. Adjust visuals: colors, text, radius, shadow.

6. Edit title, unit, description, and hover details.