Shadcn.io is not affiliated with official shadcn/ui
Stats Area Chart Dual Series
A dual-series area chart stats card for React and Next.js with overlapping var(--chart-1) and var(--chart-2) gradient fills, ChartLegend pills, ChartTooltipContent with line indicator, and a 200px fixed-height chart body built with shadcn/ui and Tailwind CSS
Compare two metrics on a single canvas with this dual-series area chart stats card for React and Next.js. Features a ChartContainer-wrapped Recharts AreaChart with two overlapping Area series, var(--chart-1) and var(--chart-2) gradient fills, a fixed 200px chart body, CartesianGrid with horizontal dashed lines, ChartTooltipContent with a line indicator, ChartLegendContent pills, tabular-nums dual headline values, and specific weekday XAxis ticks. Built with TypeScript, ChartContainer from shadcn/ui, Recharts AreaChart, motion/react parent entrance with useReducedMotion guard, Lucide React icons, and Tailwind CSS. Perfect for SaaS signups-vs-churn dashboards, desktop-vs-mobile traffic splits, completed-vs-failed job overviews, and web-vs-mobile session views.
Related Components
React Stats Block Area Chart Hero
Single-series area hero
React Stats Block Area Chart Gradient Fill
Gradient fill area card
React Stats Block Area Chart With Pill Tabs
Area chart with period tabs
React Stats Block Stacked Area Chart Breakdown
Stacked area breakdown
React Stats Block Line Chart With Threshold
Line chart with threshold
React Stats Block Bar Chart Grouped
Grouped bar comparison
FAQ
Was this page helpful?
Sign in to leave feedback.
API Usage
An endpoint-level API usage stats table for React and Next.js with a monospace path column, per-row calls, error rate, p50/p95/p99 latency percentiles, and threshold-aware rate-limit progress bars built with shadcn/ui and Tailwind CSS
Area Chart Gradient Fill
A single-series area chart stats card for React and Next.js with a multi-stop linearGradient fill, ChartContainer-wrapped Recharts AreaChart at 200px height, NumberFlow animated hero value, and CartesianGrid horizontal dashed lines built with shadcn/ui and Tailwind CSS