# SaaS revenue analytics

> Revenue trend, MRR, ARR, customers and conversion, source mix and a live transactions feed.

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

## When to use

- The revenue overview of a SaaS or commerce admin.

## When not to use

- Movement analysis: use revenue breakdown or MRR waterfall.

## Installation

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

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

npm dependencies: motion, lucide-react

## Usage

```tsx title="example.tsx"
import { RevenueAnalytics } from "@/components/blocks/revenue-analytics";

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

Built from: Area chart, Number ticker, Segmented control, Sparkline

## API reference

### RevenueAnalytics

Revenue trend with comparison, MRR, ARR, customers and conversion with sparklines, revenue by source and a live transactions feed. 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 |
| --- | --- |
| ← / → | Change the range |
| Tab | Move through cards |

## Accessibility

- Every KPI states its value and change as text.
- The transactions feed is a list with labelled amounts.

## Motion

- New transactions slide in; numbers roll on range change.

## Responsive behavior

- KPIs are two columns on phones and four from 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

- Prepend new transactions to the feed array from your webhook or event stream; they animate in.

## Related

- [Metrics dashboard](https://lodeui.com/blocks/metrics-dashboard) — KPI tabs, one inspectable chart with period comparison, and top pages and sources.
- [Revenue breakdown](https://lodeui.com/blocks/revenue-breakdown) — Recurring revenue split into new, expansion and churn, with a draggable range brush.
- [Area chart](https://lodeui.com/components/area-chart) — A smooth trend line with a comparison period and an inspectable crosshair.
- [Sparkline](https://lodeui.com/components/sparkline) — A tiny trend line that draws itself in.