---
title: "Interactive DataCard — Framer component · Best of Framer"
description: "$5.00 · Framer component · by Can Girgin · Cards. Interactive Data Card is a modern metric card for Framer."
canonical: "https://framer.elliotli.dev/component/interactive-datacard"
---

[Home](/)/[Components](/components)/[Cards](/components/category/cards)/Interactive DataCard

# Interactive DataCard

[View on Framer](https://framer.com/marketplace/components/interactive-datacard/?via=elliot-li)

![Interactive DataCard preview image 1](https://framer.elliotli.dev/og/component/interactive-datacard/ef6c0a892190341e/1600x1200.jpg)

## Summary

Interactive Data Card is a modern metric card for Framer.

## Description

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.
    

## Rank history [How rankings work →](/terms#rankings)

-   All · #7014

## Details

- **Author**: Can Girgin
- **Price**: $5.00
- **Published**: 2025-09-29
- **Updated**: 2025-09-29
- **Added**: 2025-09-21
- **Categories**: Cards

## More like this

-   [AlumniDestinations](/component/alumnidestinations) — Dulaj Design · $15 — About AlumniDestinations adds a professional, interactive directory to your Framer projects, specifically designed to showcase the success…
-   [AIJobCards](/component/aijobcards) — Dulaj Design · $15 — Beautiful interactive career grids
-   [Editorial Image Card](/component/editorial-image-card) — Victoriia Topalova · Free — Beautiful image cards for lifestyl
-   [Zipper Card](/component/zipper-card) — Aslı Ay · $12 — A padded card you unzip by hand.