Shadcn.io is not affiliated with official shadcn/ui
Stats Area Chart Split Hero
A split-hero area-chart stats card for React and Next.js with a left metric panel, NumberFlow animated hero value, delta arrow, and a right ChartContainer-wrapped Recharts AreaChart panel built with shadcn/ui and Tailwind CSS
Pair a hero metric with its trend in a two-panel layout using this split-hero area-chart stats card for React and Next.js. Features a responsive two-panel grid that stacks on mobile and sits side-by-side on sm+, a NumberFlow animated hero value with a min-w container for layout stability, an eyebrow and trend arrow delta, and a ChartContainer-wrapped Recharts AreaChart with var(--chart-1) gradient fill, horizontal-only CartesianGrid, stripped XAxis, and ChartTooltipContent. Built with TypeScript, ChartContainer from shadcn/ui, Recharts AreaChart, NumberFlow from @number-flow/react, motion/react entrance, Lucide React icons, and Tailwind CSS. Perfect for analytics route headers, revenue overview pages, product telemetry dashboards, and billing summary screens.
Related Components
React Stats Block Area Chart Hero
Primary area chart card
React Stats Block Area Chart Gradient Fill
Gradient-filled area chart
React Stats Block Area Chart Dual Series
Dual-series area chart
React Stats Block Hero Metric Card
Hero metric headline
React Stats Block Hero Metric With Sparkline
Hero metric with sparkline
React Stats Block Area Chart With Pill Tabs
Area chart with period tabs
FAQ
Was this page helpful?
Sign in to leave feedback.
Area Chart Hero
A primary area chart stats card for React and Next.js with a ChartContainer-wrapped Recharts AreaChart, NumberFlow animated hero value, PillTabs 7d/30d/90d period selector, and gradient fill via var(--chart-1) built with shadcn/ui and Tailwind CSS
Area Chart With Annotations
An area chart stats card for React and Next.js with ReferenceLine deploy markers, ReferenceDot incident annotations, gradient-filled AreaChart, and NumberFlow animated hero value built with shadcn/ui and Tailwind CSS