MRR waterfallPro

• Floating waterfall bars
• Click a bar for its accounts
• NRR and quick ratio

• Showing how a period's MRR moved from start to end.

• Trends over many months: use revenue breakdown.

Import it from @/components/blocks/mrr-waterfall after installing. It ships with sample data, so it renders straight away; swap in your own data when you're ready.

import { MrrWaterfall } from "@/components/blocks/mrr-waterfall";

export default function Page() {
  return (
    <main className="mx-auto max-w-6xl p-6">
      <MrrWaterfall />
    </main>
  );
}

• Bars are buttons labelled with their value; the selected bar uses aria-pressed.
• Every bar's amount is printed as text.

• Bars float in from the baseline; the account list animates in and out.

• The account panel moves under the chart below 1024px.

• Sample data is plain arrays at the top of the file. Replace them with your API data and keep the shapes.

• Order is start, new, expansion, contraction, churn, end; keep totals consistent.