Metric Card with Sparkline

Pro

Dashboard cards with a hand-rolled monotone-cubic SVG line and a glowing dot that snaps to wherever you scrub.

heavy saas blocksmetricsparklinecardframer motiontabler icons react

Metric Card with Sparkline component preview

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

 1"use client";
 2import { MetricSparklineCard } from "@/components/wensity/metric-sparkline-card";
 3
 4const revenueData = [24000, 24820, 25104, 24960, 26410, 27120, 28330];
 5
 6export function MetricSparklineCardDemo() {
 7  return (
 8    <MetricSparklineCard
 9      label="Revenue"
10      prefix="$"
11      values={revenueData}
12      formatValue={(n) => Math.round(n).toLocaleString()}
13    />
14  );
15}

Props

Prop	Type	Default	Description
`label`	string	-	Metric label shown above the value.
`values`	number[]	-	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.
`prefix`	string	-	Optional value prefix such as $.
`suffix`	string	-	Optional value suffix such as users.
`width`	number	320	SVG width in pixels.
`height`	number	84	SVG height in pixels.
`deltaPercent`	number	-	Optional explicit delta percentage. When omitted, derived from first vs last.
`stroke`	string	-	Stroke color CSS variable or hex. Defaults to chili-500.
`dates`	string[]	-	Optional dates corresponding to the values.
`statusLabel`	string	-	Optional default footer label when not hovering.