Skip to content
codexa

Dashboards · React

SaaS metrics

MRR, churn, ARPA and a breakdown of new, expansion and churned revenue for a subscription product.

Use this templateRemix
SaaS metrics starter, as built from its own files
Starter screenshot captured from this template's own build at 1440×900. It shows the template as it ships, not output generated from a prompt.

What you get

Subscription metrics for a small B2B scheduling product: MRR gained and lost each month, this month's MRR movement, and the latest upgrades, downgrades and cancellations. Every figure lives in src/dashboard.ts, ready to wire to your billing data.

Files

Exactly what is copied into a new project: 13 files, nothing generated.

Raw data: GET /api/v1/templates/dash-saas

Explorer 13

src/dashboard.ts
src/dashboard.ts
import type { Dashboard } from "./types"; /** Everything this dashboard shows. Edit freely. */export const dashboard: Dashboard = {  "brand": "Tallyroom",  "user": {    "name": "Noah Feldman",    "role": "Co-founder, CEO"  },  "nav": [    {      "label": "Overview",      "icon": "chart",      "href": "#overview"    },    {      "label": "Growth",      "icon": "bolt",      "href": "#trends"    },    {      "label": "Movement",      "icon": "arrow",      "href": "#breakdown"    },    {      "label": "Accounts",      "icon": "users",      "href": "#table"    },    {      "label": "Events",      "icon": "clock",      "href": "#activity"    }  ],  "title": "Subscription metrics",  "subtitle": "September 2026 · all plans",  "ranges": [    {      "label": "6M",      "points": 6    },    {      "label": "12M",      "points": 12    }  ],  "kpis": [    {      "label": "MRR",      "value": "$128,400",      "delta": "4.1%",      "up": true    },    {      "label": "Paying accounts",      "value": "1,486",      "delta": "52",      "up": true    },    {      "label": "Logo churn",      "value": "1.9%",      "delta": "0.3 pts",      "up": false,      "upIsGood": false    },    {      "label": "ARPA",      "value": "$86.41",      "delta": "1.2%",      "up": true    }  ],  "chart": {    "title": "MRR gained vs lost each month",    "type": "line",    "unit": "$",    "labels": [      "Oct",      "Nov",      "Dec",      "Jan",      "Feb",      "Mar",      "Apr",      "May",      "Jun",      "Jul",      "Aug",      "Sep"    ],    "series": [      {        "name": "New + expansion",        "values": [          6300,          6650,          6900,          7200,          7250,          7200,          7300,          7400,          7450,          7300,          7400,          9350        ]      },      {        "name": "Churn + contraction",        "values": [          3200,          3350,          3600,          3900,          3450,          3500,          3600,          3700,          3650,          3900,          4250,          4300        ]      }    ]  },  "side": {    "title": "MRR movement in September",    "items": [      {        "label": "New business",        "value": "+$6,900",        "pct": 100      },      {        "label": "Expansion",        "value": "+$2,450",        "pct": 36      },      {        "label": "Contraction",        "value": "-$880",        "pct": 13      },      {        "label": "Churned",        "value": "-$3,420",        "pct": 50      },      {        "label": "Net new MRR",        "value": "+$5,050",        "pct": 73      }    ]  },  "table": {    "title": "Subscription changes",    "columns": [      "Account",      "Plan",      "Seats",      "MRR change",      "Type",      "Date"    ],    "statusColumn": 4,    "tones": {      "New": "good",      "Upgrade": "accent",      "Downgrade": "warn",      "Churned": "bad",      "Trial": "neutral"    },    "rows": [      [        "Fernhill Dental",        "Team",        "10",        "+$290",        "New",        "Sep 30"      ],      [        "Corbett & Sons Roofing",        "Business",        "18",        "+$288",        "Upgrade",        "Sep 29"      ],      [        "Lakeside Yoga Co-op",        "Starter",        "3",        "-$27",        "Downgrade",        "Sep 28"      ],      [        "Brightpath Tutors",        "Team",        "8",        "-$232",        "Churned",        "Sep 27"      ],      [        "Marlow Physio",        "Business",        "30",        "+$1,350",        "New",        "Sep 26"      ],      [        "Hollis Event Hire",        "Team",        "6",        "$0",        "Trial",        "Sep 25"      ],      [        "Quarry Street Bakery",        "Starter",        "1",        "+$20",        "New",        "Sep 24"      ]    ]  },  "feed": {    "title": "Billing events",    "items": [      {        "text": "Marlow Physio started Business with 30 seats",        "time": "4 days ago"      },      {        "text": "Brightpath Tutors cancelled: moving to a school-wide system",        "time": "3 days ago"      },      {        "text": "14 failed card payments recovered by automatic retry",        "time": "This week"      },      {        "text": "Annual plan discount changed from 15% to 20%",        "time": "Sep 1"      }    ]  }};

Remix

Remix this template

Describe what to change and the agent starts from SaaS metrics's files. The box is already started for you: finish “Start from SaaS metrics and …”

Agent ready

Creates a free account first; your idea is carried over.

Dependencies

Documented from the template's package.json. The runtime has a prebuilt dependency set for Vite + React + TypeScript, so installs are fast.

  • react^19.1.0
  • react-dom^19.1.0
  • vite^6.3.0
  • @vitejs/plugin-react^4.4.0
  • tailwindcss^4.1.0
  • @tailwindcss/vite^4.1.0
  • typescript^5.8.0

How it runs

Framework
Vite + React + TypeScript
Dev command
npm run dev
Build command
npm run build
Output directory
dist
Port
5173
Entry route
/

Projects run in an isolated sandbox with a live preview. Read the projects documentation for settings, snapshots and deployment.

Keep browsing

All templates

Build on SaaS metrics

Create a free account, start from this template, and ask the AI agent to turn it into your app.

Use this templateAll templates