# MRR waterfall

> How MRR moved from start to end of a period, and which accounts moved it.

Block · Pro · https://lodeui.com/blocks/mrr-waterfall

## When to use

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

## When not to use

- Trends over many months: use revenue breakdown.

## Installation

```bash
npx shadcn@latest add @lode/mrr-waterfall
```

Pro: needs a Lode API key and the `@lode` registry in components.json. See https://lodeui.com/docs/cli.

npm dependencies: motion

## Usage

```tsx title="example.tsx"
import { MrrWaterfall } from "@/components/blocks/mrr-waterfall";

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

Built from: Number ticker, Segmented control

## API reference

### MrrWaterfall

A floating waterfall from starting to ending MRR with net revenue retention and quick ratio. Also the default export. No props: sample data sits at the top of the file, ready to swap for your own.

No props.

## Keyboard interactions

| Keys | Action |
| --- | --- |
| Tab | Move between bars and the period control |
| Enter / Space | Open the accounts behind a bar |

## Accessibility

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

## Motion

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

## Responsive behavior

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

## Performance

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

## Notes for AI

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

## Related

- [Revenue breakdown](https://lodeui.com/blocks/revenue-breakdown) — Recurring revenue split into new, expansion and churn, with a draggable range brush.
- [Number ticker](https://lodeui.com/components/number-ticker) — Every digit rolls on its own wheel, odometer style.