# MRR movements

A shadcn/ui block for SaaS billing dashboards: recurring revenue month by month as gained and lost running totals, a lane per plan, and each customer's change as a diff.

> For the complete documentation index, see [llms.txt](/llms.txt). Markdown variants are available for the docs, pricing and about pages: append `.md` to the URL or send an `Accept: text/markdown` header (the home page answers the header too). An agent skill is available at [/.well-known/agent-skills/site-skill.md](/.well-known/agent-skills/site-skill.md).

## At a glance

- **Good for:** SaaS billing and revenue dashboards; Founder and investor updates on monthly recurring revenue; Subscription analytics on Stripe or Paddle events; Admin panels that explain why revenue moved this month
- **Category:** Finance, Data · **Type:** Charts · **Style:** Motion, Minimal, Dark mode
- **See it:** [Live preview](https://www.craftui.space/docs/blocks/mrr-movements) · [Screenshot](https://www.craftui.space/llms.md/preview/mrr-movements.b4d619f1.jpg)

![MRR movements](https://www.craftui.space/llms.md/preview/mrr-movements.b4d619f1.jpg)

## Install

```bash
pnpm dlx shadcn@latest add https://www.craftui.space/r/mrr-movements.json
```

This is a paid item (BLK-56QZAT): the install needs a craftUI plan or a purchase of it. Signed in, the docs page gives your personal install command. Plans: https://www.craftui.space/pricing

## Usage

```tsx
import MrrMovements from "@/components/blocks/mrr-movements";

export default function Page() {
  return <MrrMovements />;
}
```

With no props it renders with demo content; pass your own through the props below.

## Props

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `movements` | `MrrMovement[]` | — | Every change, across as many months as you have. Leave out for the demo. |
| `month` | `Date \| string \| number` | — | The month shown (any moment in it), when you control it. |
| `defaultMonth` | `Date \| string \| number` | — | The month to open on, when it's left uncontrolled. Defaults to the latest. |
| `onMonthChange` | `(month: Date) => void` | — | Called with the first day of the month picked. |
| `now` | `Date \| string \| number` | — | Where the data stops ("today", for a month still running). |
| `plans` | `string[]` | — | The plans, top lane first. Defaults to the order they first appear. |
| `title` | `string` | `"MRR movements"` | The card's title. |
| `currency` | `string` | `"USD"` | An ISO currency code, e.g. "USD". |
| `locale` | `string` | `"en-US"` | A BCP 47 locale for numbers and dates. Set one so the server and the browser format alike. |

It also accepts every `<div>` attribute (`className`, `id`, `aria-*` and so on).

### `MrrMovement`

| Field | Type | Description |
| --- | --- | --- |
| `id` (required) | `string` | A stable id for the change, e.g. the billing event's id. |
| `at` (required) | `Date \| string \| number` | When it happened. |
| `customer` (required) | `string` | Who it was. |
| `from` | `MrrPlan` | What they paid before. Leave out for a new customer. |
| `to` | `MrrPlan` | What they pay now. Leave out for a cancellation. |
| `reactivation` | `boolean` | A customer coming back after cancelling, rather than a new one. |

### `MrrPlan`

| Field | Type | Description |
| --- | --- | --- |
| `plan` (required) | `string` | The plan's name, e.g. "Pro". |
| `mrr` (required) | `number` | What it bills a month, in the currency's main unit. |

## Files

The install adds:

- `components/blocks/mrr-movements.tsx`

npm dependencies (installed for you): `@number-flow/react`, `motion`, `torph`.

shadcn/ui components it uses (the shadcn CLI adds any that are missing): `button`, `card`, `dropdown-menu`.