Shadcn.io is not affiliated with official shadcn/ui
Stats Waterfall Chart Card
A waterfall chart stats card for React and Next.js with Recharts BarChart rendering cumulative additions and subtractions as floating colored bars, emerald gains, red losses, foreground totals, NumberFlow net result, and connector logic built with shadcn/ui and Tailwind CSS
Visualize cumulative financial breakdowns with this waterfall chart stats card for React and Next.js. Features a ChartContainer-wrapped Recharts BarChart with stacked invisible and visible bars creating the floating waterfall effect, emerald fills for additions, red fills for subtractions, foreground fills for start and end totals, a NumberFlow animated net result in the header, CartesianGrid with horizontal dashed lines, and ChartTooltipContent with custom formatting. Built with TypeScript, ChartContainer from shadcn/ui, Recharts BarChart with stacked Bars, NumberFlow, motion/react parent entrance, Lucide React icons, and Tailwind CSS. Perfect for P&L waterfall breakdowns, budget reconciliation dashboards, revenue bridge analysis, and financial reporting widgets.
Related Components
React Stats Block Bar Chart Diverging
Positive negative bars from zero baseline
React Stats Block Bar Chart Stacked
Layered segment stacked bars
React Stats Block Bar Chart Horizontal
Horizontal bar ranking chart
React Stats Block Hero Metric Card
Single headline KPI card
React Stats Block Funnel Vertical
Vertical proportional stage bars
React Stats Block Area Chart Hero
Primary area chart with period selector
FAQ
Was this page helpful?
Sign in to leave feedback.
Waffle Chart Card
A waffle chart stats card for React and Next.js with a 10x10 grid of colored squares showing proportional segment distribution, chart-token colored cells, a legend with percentages, and tabular-nums values built with shadcn/ui and Tailwind CSS
Weekly Heatmap Tile Grid
A weekly heatmap tile grid stats card for React and Next.js with 7 day-of-week tiles and 24 hourly intensity cells per row, emerald 5-level intensity ramp, and tabular-nums peak-hour labels built with shadcn/ui and Tailwind CSS