# Revenue breakdown

> Recurring revenue split into new, expansion and churn, with a draggable range brush.

Block · Pro · https://lodeui.com/blocks/revenue-breakdown

## When to use

- Explaining what drove MRR change month by month.
- Investor or board reporting views.

## When not to use

- A single revenue number: use a KPI card.

## Installation

```bash
npx shadcn@latest add @lode/revenue-breakdown
```

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 { RevenueBreakdown } from "@/components/blocks/revenue-breakdown";

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

Built from: Number ticker, Segmented control, Stacked area chart

## API reference

### RevenueBreakdown

New, expansion and churned MRR as stacked areas above and below zero, with a draggable range brush and legend toggles. 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 | Reach the range handles and legend toggles |
| ← / → | Move the focused range handle by one month |
| Enter / Space | Toggle a series in the legend |

## Accessibility

- Range handles are role="slider" with the month as aria-valuetext.
- Legend items are toggle buttons with aria-pressed.
- KPIs are text, so the totals don't depend on the chart.

## Motion

- The chart morphs as the window moves.
- KPI digits roll as totals change.

## Responsive behavior

- The brush works with touch and pointer drag.
- KPIs wrap to two columns on phones.

## Performance

- 24 months of data; the chart recomputes paths only for the selected window.
- Sample data is plain arrays at the top of the file. Replace them with your API data and keep the shapes.

## Notes for AI

- Churn values are positive numbers marked negative: true; the chart draws them below zero.

## Related

- [Stacked area chart](https://lodeui.com/components/stacked-area-chart) — Stacked series above and below zero, morphing as the range changes.
- [MRR waterfall](https://lodeui.com/blocks/mrr-waterfall) — How MRR moved from start to end of a period, and which accounts moved it.
- [SaaS revenue analytics](https://lodeui.com/blocks/revenue-analytics) — Revenue trend, MRR, ARR, customers and conversion, source mix and a live transactions feed.