Back to components
MRR Waterfall Card React component

What is this?

A white MRR tile with a seven-column waterfall: Start, New, Expand, Renew, Contract, Churn, and End. When the card comes into view, the bars grow from left to right and a dashed line then joins each bar to the next. New, Expand, and Renew rise in green, Contract and Churn drop in rose, and the two totals stand from the bottom of the plot. The header shows the closing MRR and the net change. Swap the label and the amounts, then drop it into a revenue dashboard or a finance feature block.

Component

MRR Waterfall Card

A white MRR tile with a seven-column waterfall: Start, New, Expand, Renew, Contract, Churn, and End. When the card comes into view, the bars grow from left to right and a dashed line then joins each bar to the next. New, Expand, and Renew rise in green, Contract and Churn drop in rose, and the two totals stand from the bottom of the plot. The header shows the closing MRR and the net change. Swap the label and the amounts, then drop it into a revenue dashboard or a finance feature block.

Checking access…
Live Preview

Verified Technical Spec

Animation
CSS / Tailwind
Reduced motion
Verified
Keyboard focus
Not detected in source
Compatibility
Tailwind CSS v3.4 + v4 · React 19 / Next.js 15 App Router + Vite / Remix compatible

Included

  • Copy source into Cursor or Claude for agent install
  • Finished React · TypeScript · Tailwind CSS · Lucide UI

Dependencies

  • React 19.0.0
  • Typescript 5.7.2
  • Tailwindcss 3.4.16
  • Lucide-react 1.23.0

Tech Stack

  • React
  • TypeScript
  • Tailwind CSS
  • Lucide

Version 1.0.0