Shadcn.io is not affiliated with official shadcn/ui
Stats Pareto Chart Card
A Pareto chart stats card for React and Next.js with Recharts ComposedChart combining descending-sorted bars and a cumulative percentage line, a ReferenceLine at the 80% threshold, NumberFlow animated top-contributor callout, and dual Y-axes built with shadcn/ui and Tailwind CSS
Apply the 80/20 principle with this Pareto chart stats card for React and Next.js. Features a ChartContainer-wrapped Recharts ComposedChart with vertical bars sorted in descending order colored with var(--chart-1), a cumulative percentage Line on a secondary Y-axis using var(--chart-2), a horizontal ReferenceLine at 80% marking the Pareto threshold, NumberFlow animated header showing the top contributors, and ChartTooltipContent with dual value display. Built with TypeScript, ChartContainer from shadcn/ui, Recharts ComposedChart with Bar and Line, NumberFlow, motion/react parent entrance, and Tailwind CSS. Perfect for defect analysis dashboards, revenue concentration widgets, support ticket prioritization, and cost driver identification.
Related Components
React Stats Block Bar Horizontal
Horizontal bar chart
React Stats Block Bar Stacked
Stacked segment bars
React Stats Block Leaderboard Ranked
Ranked list card
React Stats Block Funnel Vertical
Vertical funnel stages
React Stats Block Area Chart Hero
Primary area chart card
React Stats Block Donut Breakdown
Segment distribution donut
FAQ
Was this page helpful?
Sign in to leave feedback.
Okr Target Cards
An OKR target stats card grid for React and Next.js with three objective tiles, nested key-result progress bars, threshold-aware bar colors, and an overall completion percentage per objective built with shadcn/ui and Tailwind CSS
Period Comparison Card
A period-over-period comparison stats card for React and Next.js with two side-by-side tabular-nums values separated by a large delta callout, NumberFlow on the current value, and a semantic trend header built with shadcn/ui and Tailwind CSS