Arc
ComponentsBlocksDocsPricingTry the demo
Get Pro
Introduction
Installation
Theming
Motion
AI and MCP
Changelog
Metrics dashboardPro
KPI drilldownPro
Metric explorerPro
Revenue explorerPro
MRR waterfallPro
Cohort retentionPro
Usage forecastPro
Journey flowPro
Uptime statusPro
Pivot builderNewPro
Choropleth explorerPro
Connected scatterPro
Horizon chartPro
Account healthPro
Market terminalPro
Budget variancePro
Small multiplesPro
Line replayPro
AI chatPro
AI composerPro
AI answerPro
Model pickerPro
Model arenaPro
Prompt studioPro
Document extractionPro
Agent memoryPro
AI side panelPro
AI inline editPro
Research runPro
AI insight cardPro
Catch upPro
AI feature launchPro
AI search barPro
AI setup wizardPro
Call insightsPro
Lead scoringPro
Agent runPro
Agent tasksPro
Agent approvalsPro
Agent routinesPro
Agent orchestratorPro
MCP serversPro
Knowledge basePro
Eval suitePro
Agent builderPro
Agent galleryPro
SidebarPro4
Page header
Command palette
Notification center
Selection toolbarPro
Empty states
Search resultsPro
Login and sign up5, free and Pro variants
Onboarding illustrationPro
OTP input
Multi-step formPro
Two-factor setupPro
Magic linkPro
Settings pagePro
Settings commandPro
Security settingsPro
Billing overviewPro
Usage billingPro
Cancel flowPro
Onboarding surveyPro
Spend alertPro
Team membersPro
Invite peoplePro
Team directoryPro
Roles and permissionsPro
Profile pagePro
API keysPro
WebhooksPro
IntegrationsPro
Environment variablesPro
Domain verifyPro
Webhook testerPro
Plan comparison
Pricing calculatorPro
Usage pricingPro
Cart drawerPro
Checkout summaryPro
Live checkoutPro
Seat managerPro
Credit top-upPro
Invoice studioPro
Wallet cardPro
Delivery trackerPro
Product listingPro
Product detailPro
Seat mapPro
Activity feedPro
Inbox triagePro
Support conversationPro
Support widgetPro
Help centerPro
Feature votingPro
File upload
Media playerPro
Week calendarPro
Availability pickerPro
Project boardPro
Gantt timelineNewPro
Release readinessPro
Kanban boardPro
Feedback boardPro
Smart schedulerPro
Task breakdownPro
Goal trackerPro
Hero section
Hero signupPro
Scroll storyPro
Spotlight gridPro
Feature bentoPro
Comparison table
Logo marquee
Studio perspectivesPro
Stats band
Changelog feed
FAQ section
Contact section
Team showcasePro
Blog grid
Site header
Site footer
CTA section
Newsletter signup
Activity terrainPro
Revenue globePro
Customer galaxyPro
Semantic zoomPro
Layout morphPro
Exploded viewPro
What’s new4 new
BlocksMRR waterfall

MRR waterfall

Pro

An MRR bridge whose floating bars morph by period and open the accounts behind each move.

Live block · sample data

MRR movement

All plans · Jul 1 – Sep 30, 2025

Ending MRR on Sep 30

$465,650$001234567890012345678900123456789,001234567890012345678900123456789

+$53,270+$0012345678900123456789,001234567890012345678900123456789+12.9%+0012345678900123456789.00123456789%since Jul 1

Net revenue retention
97.7%0012345678900123456789.00123456789%
Quick ratio
2.3200123456789.0012345678900123456789
Logo churn
9.5%00123456789.00123456789%
$350k$375k$400k$425k$450k$475k$500k$525kStartNewExpansionReactivationContractionChurnEnd
$350.0k
+$0.0k
+$0.0k
+$0.0k
−$0.0k
−$0.0k
$350.0k

New business

+$55,800+$0012345678900123456789,001234567890012345678900123456789

187001234567890012345678900123456789 new accounts

  • Granite Mutual+$6,400+$00123456789,001234567890012345678900123456789Sep · Enterprise, annual
  • Northpeak Logistics+$5,200+$00123456789,001234567890012345678900123456789Aug · Enterprise, annual
  • Halcyon Health+$4,800+$00123456789,001234567890012345678900123456789Jul · Enterprise, annual
  • Orchard Health+$2,320+$00123456789,001234567890012345678900123456789Sep · Scale, 80 seats
  • Kestrel Freight+$1,740+$00123456789,001234567890012345678900123456789Jul · Scale, 60 seats
  • Other accounts+$35,340+$0012345678900123456789,001234567890012345678900123456789182 accounts

Select a bar or use the arrow keys to see its accounts

MRR movement, Q3 2025
MovementAmountShare of starting MRRAccounts
Starting MRR$412,380100.0%1,241
New business+$55,80013.5%187
Expansion+$31,0607.5%123
Reactivation+$6,7801.6%27
Contraction−$13,8303.4%60
Churn−$26,5406.4%118
Ending MRR$465,650112.9%1,337

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

Pro source and install commands unlock with a Pro plan.

Usage

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.

example.tsx
1import { MrrWaterfall } from "@/components/arc/blocks/mrr-waterfall/mrr-waterfall";2 3export default function RevenuePage() {4  return (5    <section>6      <MrrWaterfall />7    </section>8  );9}
Built fromSegmented controlAnimated counter

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

Arrow keys
Moves the selection to the previous or next bar, wrapping at the ends.
HomeorEnd
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

Give your coding assistant the Markdown reference instead of screenshots.

  • 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.
/components/blocks/mrr-waterfall/markdown

The full library index for assistants is at /llms.txt.

Related

Revenue explorerProBlockA SaaS revenue chart you zoom with a brush while paths, axes and figures glide to the range.Cohort retentionProBlockA cohort retention triangle that morphs into retention curves and rewashes by segment.Bar chartComponentCompare one measure across days and scrub any bar for its value.Segmented controlComponentSwitch between a small set of related views.Metric explorerProBlockKPI cards that open into a scrubbable chart and morph between metrics and ranges.
PreviousUsage forecastNextWebhooks
Arc · 134 block pagesllms.txt

On this page

  • Preview
  • When to use
  • When not to use
  • Installation
  • Usage
  • API reference
  • Keyboard
  • Accessibility
  • Motion
  • Responsive behavior
  • Performance
  • Notes for AI
  • Related
View as Markdown