MRR waterfallPro

• Type: Block

• Page: https://ui.xzero.co.uk/components/blocks/mrr-waterfall

• Markdown: https://ui.xzero.co.uk/components/blocks/mrr-waterfall/markdown

• Access: Xzero Pro

• Registry id: mrr-waterfall

• Source file: registry/blocks/mrr-waterfall/mrr-waterfall.tsx

• Built from: Segmented control, Animated counter

• Keywords: react waterfall chart, mrr bridge, revenue waterfall, mrr movements chart, saas revenue bridge, floating bar chart

Use this on a revenue or board reporting page to explain how MRR moved. Replace the seeded months and accounts in mrr-data.ts with your billing movements; levels, axis, ratios and lists are computed from them.

When to use

• Revenue or board reporting that explains how MRR moved from start to end of a period.
• Finance views where each movement should list the accounts behind it.

When not to use

• Use revenue-explorer for MRR over many months.
• Use bar-chart for plain comparisons that do not build from a start value.
• Use cohort-retention for retention by cohort.

Installation

Register both Xzero UI namespaces in your project's components.json:

{
  "registries": {
    "@xzero-ui": "https://mcp.xzero.co.uk/r/{name}.json",
    "@xzero-ui-pro": "https://mcp.xzero.co.uk/r/pro/{name}.json"
  }
}

npx shadcn@4.23.0 add @xzero-ui-pro/mrr-waterfall

Install xzero-foundation once, and import @/components/xzero/foundation.css in your app root. No Xzero token is used by this snapshot. For sample portraits, photos, fonts, or logos, download https://mcp.xzero.co.uk/install-assets.mjs and run node xzero-install-assets.mjs <receiving-project>.

Usage

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

export default function RevenuePage() {
  return (
    <section>
      <MrrWaterfall />
    </section>
  );
}

API reference

MrrWaterfall

An MRR bridge with floating bars per movement, a period switch and a panel listing the accounts behind the selected bar. Takes no props; periods, movements and accounts are sample data in mrr-data.ts.

No props.

Keyboard interactions

Keys	Action
Arrow keys	Moves the selection to the previous or next bar, wrapping at the ends.
Home / End	Selects the first or last bar.

Accessibility

• Bars are a role="radiogroup" of radio buttons with roving tabindex; each label reads the movement, amount and account count.
• The chart SVG carries a text summary, and the accounts panel is labelled by the selected movement.
• A polite live region announces each newly selected bar.

Motion

• Bars morph to new levels when the period changes, and the account list reorders with layout animation.
• Headings and figures swap with a short rise, and totals roll with the animated counter.
• Reduced motion swaps values without movement.

Responsive behavior

• Below an 800px container the accounts panel moves under the chart.
• Below 560px the summary stats become a three column row with smaller figures.
• Hover previews apply only to mouse pointers; touch taps select a bar.

Performance

• A handful of SVG bars per period, sized by ResizeObserver; cheap at any size.
• Account lists are not virtualized, so cap or paginate large movements.

Notes for AI

• Use on a revenue or board reporting page to explain how MRR moved between periods.
• Replace PERIODS in mrr-data.ts with your billing movements; levels, axis and lists are computed from them.

Related

• Revenue explorer: A SaaS revenue chart you zoom with a brush while paths, axes and figures glide to the range.
• Cohort retention: A cohort retention triangle that morphs into retention curves and rewashes by segment.
• Bar chart: Compare one measure across days and scrub any bar for its value.
• Segmented control: Switch between a small set of related views.
• Metric explorer: KPI cards that open into a scrubbable chart and morph between metrics and ranges.

Guidance for AI tools

Blocks are complete, self-contained screens with sample data. Replace the sample data and connect the callbacks described above. Follow the declared prop types and do not invent props. Keep keyboard access, reduced motion support, and both light and dark themes intact when adapting it.

Full library index: https://ui.xzero.co.uk/llms.txt