Shadcn.io is not affiliated with official shadcn/ui
Stats Sparkline Card With Range
A sparkline stats card for React and Next.js with Recharts ReferenceLine min and max range bounds, inline high and low labels on the sparkline edges, and a NumberFlow animated current price built with shadcn/ui and Tailwind CSS
Visualize a value inside its historical range with this sparkline stats card with range bounds for React and Next.js. Features a ChartContainer-wrapped Recharts AreaChart with ReferenceLine min and max bounds, gradient fill via var(--chart-1), high and low edge labels positioned on the reference lines, a fixed 120px chart body, and a NumberFlow-animated headline price displayed above the spark. Built with TypeScript, ChartContainer from shadcn/ui, Recharts AreaChart with ReferenceLine, NumberFlow from @number-flow/react, motion/react parent entrance, Lucide React icons, and Tailwind CSS. Perfect for commodity price trackers, 52-week stock range cards, temperature range monitors, and server utilization dashboards.
Related Components
React Stats Block Sparkline
Per-metric inline area chart
React Stats Block Sparkline Dual Series
Two series spark card
React Stats Block Sparkline Gradient Trend
Trend-keyed gradient spark
React Stats Block Sparkline Monochrome Card
Monochrome spark card
React Stats Block Area Chart With Reference Area
Area chart with reference band
React Stats Block Line Chart With Threshold
Line chart with threshold marker
FAQ
Was this page helpful?
Sign in to leave feedback.
Sparkline
A sparkline stats card grid for React and Next.js with per-metric inline area charts via ChartContainer, trend-keyed gradient fills, and tabular-nums value displays built with shadcn/ui and Tailwind CSS
Sparkline Dual Series
A dual-series sparkline stats card for React and Next.js with two overlapping inline area charts in var(--chart-1) and var(--chart-2), thin 1.5px strokes, layered gradient fills, and current vs previous period comparison built with shadcn/ui and Tailwind CSS