Halloween only 🎃 Get Wensity Pro for 31% less with
Wensity

KPI Card with Sparkline

Pro

Dashboard KPI cards with a smooth SVG sparkline chart and a glowing dot that snaps to whichever value you scrub across.

heavy saas blocksmetricsparklinecardframer motiontabler icons react
KPI Card with Sparkline component preview

Overview

KPI Card with Sparkline is a React and Tailwind CSS stat card for SaaS dashboards that pairs a headline number with an SVG trend line, in Next.js or any React app. The curve is a monotone cubic path built in the component, so there is no chart library and the line never overshoots your data. Move the pointer across it and a glowing dot snaps to the nearest point while the headline and footer show that value and date. A green or red pill shows the change from the first value, so pass deltaPercent when your series starts at zero.

Installation

Run the following command

~/your-project
pnpm dlx wensity@latest add metric-sparkline-card

Usage

Import MetricSparklineCard from @/components/wensity/metric-sparkline-card and render it anywhere in your React or Next.js app. The source lands in your own repo, so every prop, class and animation below is yours to edit.

app/example.tsx
"use client";
import { MetricSparklineCard } from "@/components/wensity/metric-sparkline-card";


const revenueData = [24000, 24820, 25104, 24960, 26410, 27120, 28330];


export function MetricSparklineCardDemo() {
  return (
    <MetricSparklineCard
      label="Revenue"
      prefix="$"
      values={revenueData}
      formatValue={(n) => Math.round(n).toLocaleString()}
    />
  );
}

Props

PropTypeDefaultDescription
labelstring-Metric label shown above the value.
valuesnumber[]-Raw series values. Length should be at least 2.
formatValue(n: number) => string-Pretty-print the primary value. If omitted, the last data point is shown.
prefixstring-Optional value prefix such as $.
suffixstring-Optional value suffix such as users.
widthnumber320SVG width in pixels.
heightnumber84SVG height in pixels.
deltaPercentnumber-Optional explicit delta percentage. When omitted, derived from first vs last.
strokestring-Stroke color CSS variable or hex. Defaults to chili-500.
datesstring[]-Optional dates corresponding to the values.
statusLabelstring-Optional default footer label when not hovering.

Related components

  • Fluid Drag-and-Drop Kanban component preview

    Fluid Drag-and-Drop Kanban

    A Trello-grade board running real pointer physics, where every card tilts toward the velocity you throw it across at.

  • Multi-Step Form Wizard component preview

    Multi-Step Form Wizard

    A multi-step form wizard whose card physically reshapes to wrap each new step as the content slides in behind it.

  • GitHub-Style Activity Grid component preview

    GitHub-Style Activity Grid

    365 squares sharing one tooltip that flies between days on rails, with a reveal that ripples backward from today.

  • Subscription Tier Card component preview

    Subscription Tier Card

    Pricing cards with a monthly and annual toggle, prices that spring to new values, and a highlighted plan in a brand glow.