Free Component

Animated Metric KPI Card

A high-contrast dark dashboard metric card featuring real-time counter animation, positive trend badge, sparkline SVG, and subtle glass reflection.

dark
metric
card
kpi
dashboard
analytics
counter

The code

Plain HTML, CSS and JavaScript with no dependencies. Copy a single file, or choose "Full file" for a complete page you can save as index.html and open in a browser.

<div class="kpi-card">
  <div class="kpi-header">
    <div class="kpi-title-wrap">
      <span class="kpi-label">Monthly Recurring Revenue</span>
      <span class="kpi-live-dot" title="Live streaming data"></span>
    </div>
    <span class="kpi-badge kpi-badge-up">+28.4%</span>
  </div>

  <div class="kpi-value-row">
    <span class="kpi-currency">$</span>
    <span class="kpi-number" id="kpiCounter">0</span>
  </div>

  <div class="kpi-chart">
    <svg viewBox="0 0 280 44" fill="none" class="kpi-svg">
      <defs>
        <linearGradient id="kpiGrad" x1="0" y1="0" x2="0" y2="1">
          <stop offset="0%" stop-color="#10b981" stop-opacity="0.35"/>
          <stop offset="100%" stop-color="#10b981" stop-opacity="0.0"/>
        </linearGradient>
      </defs>
      <path d="M0 38 Q 45 32, 70 26 T 140 18 T 210 10 T 280 4 L 280 44 L 0 44 Z" fill="url(#kpiGrad)"/>
      <path d="M0 38 Q 45 32, 70 26 T 140 18 T 210 10 T 280 4" stroke="#10b981" stroke-width="2.5" stroke-linecap="round"/>
    </svg>
  </div>

  <div class="kpi-footer">
    <span class="kpi-sub">vs. previous 30 days ($115,480)</span>
    <a href="#" class="kpi-link">Report &rarr;</a>
  </div>
</div>

The AI prompt

Paste this into an AI coding tool to generate the same component, then ask it to adapt the colours, text or framework to your project.

Works with Claude · ChatGPT · Cursor · v0 · Bolt · Gemini

Create a dark SaaS KPI metric card with animated counter and sparkline SVG using HTML, CSS and vanilla JavaScript.

Requirements:
- Compact card (approx 360px wide) with dark theme (#0b1120), soft border and top neon accent line.
- Header with metric label, pulsing live indicator dot, and green percentage growth badge (+28.4%).
- Large metric value ($148,290) that counts up smoothly on load using requestAnimationFrame with ease-out cubic.
- Mini sparkline chart created with inline SVG and a subtle gradient fill area.
- Footer comparing to previous period with a direct link.

Return one HTML file with <style> and <script> tags.

How to build it, step by step

1
Structure the card with header, number row, SVG sparkline, and comparative footer.
2
Style with dark navy background and top green highlight line using a ::before pseudo-element.
3
Draw the sparkline trend with SVG path curves and a gradient area fill.
4
Animate the number from 0 to target using requestAnimationFrame and ease-out cubic.
5
Format the output integer with toLocaleString() for comma separation.

Customisation tips

Use font-variant-numeric: tabular-nums to prevent numbers from wobbling horizontally during counter animation.
Combine SVG defs linearGradient with stroke-width for a professional financial dashboard aesthetic.
Ensure color contrast meets WCAG AA standards against the dark background.