Shadcn.io is not affiliated with official shadcn/ui
Stats 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
Compare current and previous period trends at a glance with this dual-series sparkline stats card for React and Next.js. Features a ChartContainer-wrapped Recharts AreaChart rendering two overlapping sparklines in var(--chart-1) and var(--chart-2), thin 1.5px strokes, per-series linearGradient defs, tabular-nums value displays, and a legend row with color dots and semantic delta pills. Built with TypeScript, ChartContainer from shadcn/ui, Recharts AreaChart, motion/react parent entrance with useReducedMotion, Lucide React TrendingUp icons, and Tailwind CSS. Perfect for MRR vs last month dashboards, DAU comparisons, week-over-week API traffic, and YoY product analytics cards.
Related Components
React Stats Block Sparkline
Per-metric inline area chart
React Stats Block Sparkline Tile Grid
Grid of sparkline tiles
React Stats Block Sparkline Gradient Trend
Gradient-filled sparkline card
React Stats Block Sparkline Monochrome Card
Monochrome sparkline card
React Stats Block Area Chart Dual Series
Full-size dual-series area chart
React Stats Block Comparison With Sparklines
Period comparison with sparklines
FAQ
Was this page helpful?
Sign in to leave feedback.
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
Sparkline Gradient Trend
A sparkline stats card grid for React and Next.js with trend-keyed emerald/red gradient fills, tabular-nums headline values, and ChartContainer-wrapped AreaChart sparklines built with shadcn/ui and Tailwind CSS