Line chart
Sparkline Card
A small metric card with a dense sparkline, trend badge and animated masked area.
The card is designed for dashboard grids where every pixel matters: compact value, trend context, subtle tooltip and a responsive SVG path.
Dependencies
rechartsframer-motionlucide-reacttailwind-mergetailwind-variants
Interaction type
Hover the sparkline to reveal a tooltip cursor and active dot without expanding the card.
Usage
import { SparklineCard } from "@/registry/new-york-v4/ui/sparkline-card"
<SparklineCard data={data} value={84.2} />Conversion
84.2%
vs last release cycle