Components
A compact SVG sparkline that draws itself, morphs between trend states, and shifts color for positive or negative movement. The exported AnimatedSparkline wraps it in a card with a label, an animated headline value, and a trend percentage (green up / red down); the underlying Sparkline is a standalone primitive with smooth or sharp curves, an optional soft glow, a fading left edge, an animated endpoint dot, and a replayable self-drawing reveal. Built with @number-flow/react for the value spin.
npx @21st-dev/cli@beta add larsen66/animated-sparklineLoading preview...
"use client";
import { Sparkline } from "@/components/ui/animated-sparkline";
const data = [
{ label: "Jan", value: 42 },
{ label: "Feb", value: 47 },
{ label: "Mar", value: 44 },
{ label: "Apr", value: 53 },
{ label: "May", value: 57 },
{ label: "Jun", value: 63 },
{ label: "Jul", value: 61 },
{ label: "Aug", value: 72 },
];
export default function BareSparkline() {
return (
<div className="flex min-h-screen w-full items-center justify-center bg-white p-8">
<div className="w-64" style={{ color: "#30a46c" }}>
<Sparkline ariaLabel="Revenue trend up" data={data} glow showEndpoint />
</div>
</div>
);
}
Loading preview...