Shadcn.io is not affiliated with official shadcn/ui
Stats Dumbbell Chart Card
A dumbbell chart stats card for React and Next.js with horizontal rows showing two connected dots per category representing start and end values, a connecting line between dots, delta labels, and semantic direction colors built with shadcn/ui and Tailwind CSS
Compare value ranges across categories with this dumbbell chart stats card for React and Next.js. Features horizontal rows where each category shows two positioned dots connected by a thin line, the left dot represents the previous period value in var(--chart-2), the right dot represents the current value in var(--chart-1), a connecting line showing the gap, delta labels on the right, and semantic emerald or red coloring based on direction. Built with TypeScript, pure CSS positioned elements, motion/react parent entrance with useReducedMotion, and Tailwind CSS. Perfect for before-after comparisons, salary range visualizations, min-max performance ranges, and A/B test metric comparisons.
Related Components
React Stats Block Comparison Delta
Period comparison with delta
React Stats Block Before After
Before after state card
React Stats Block Bar Horizontal
Horizontal bar chart
React Stats Block Leaderboard Bars
Ranked list with bars
React Stats Block Progress List
Linear goal bars
React Stats Block Period Comparison
Period over period card
FAQ
Was this page helpful?
Sign in to leave feedback.
Donut With Center Total
A segment breakdown donut stats card for React and Next.js with an absolute-positioned NumberFlow center total, ChartContainer-wrapped Recharts PieChart, per-segment var(--chart-N) tokens, and a pill legend below built with shadcn/ui and Tailwind CSS
Funnel Split Cohorts
A split-cohort funnel stats card for React and Next.js with parallel mobile and desktop bars at every stage, proportional stage widths, inline conversion percentages, and a delta column comparing the two cohorts built with shadcn/ui and Tailwind CSS