Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Dashboard blocks

Pro

Subscription Metrics Dashboard Block for React

A month's MRR or customer movements walked from new to net new as floating columns on tabs, with six metrics under them that each give their formula and this month's numbers in a hover card.

Framework
UI library

Preview

Preview width

Installation

Part of Pro
Pro unlocks the code and one-line install of every Pro button and text effect, plus the MCP for your AI editor.
Get ProSign in
Have Pro already? Sign in to open it.Opens here as soon as you're Pro.

Overview

See how a subscription business moved in a month and read its terms, with this subscription metrics panel for React with Base UI. A hairline frame with a plus mark on each corner opens with Tabs for MRR and Customers: MRR draws new, expansion, contraction and churn as floating columns that end in the net new column, and Customers draws new, won back, paused and churned the same way. A Native Select in the header picks July, August or September 2026. Under the bridge, six metrics (MRR, ARR, logo churn, ARPU, LTV and net revenue retention) are worked out from the same movements, and each term is a Hover Card that gives its formula with this month's numbers filled in. It's built from Tabs, Native Select, Hover Card and Guides. For SaaS metrics pages and board packs.

FAQ

How do I fill it with my own movements?

Edit MONTHS. Each month holds the opening MRR and customer count and the month's movements: new, expansion, contraction and churn in dollars, and new, won back, paused and churned in customers. The bridge, the net columns, MRR, ARR and the six terms are all worked out from those, so nothing is typed twice.

How are the six terms worked out?

MRR is the opening figure plus the net movement; ARR is MRR times 12; logo churn is the customers lost over the customers at the start; ARPU is MRR over the customers at the end; LTV is ARPU over monthly logo churn, before any margin; net revenue retention is the opening MRR plus expansion, minus contraction and churn, over the opening MRR. Each hover card shows the formula and the month's numbers.

Can I read the formulas without a pointer?

Yes. Each term is a real button, so Tab reaches it, its card opens on focus and closes on Escape or when focus leaves, and on a touch screen a press opens it. The same formulas are not hidden anywhere else, so keep the buttons if you restyle the list.

What stays local, and how do I wire it for real?

Everything: the movements are typed and nothing is read from a billing system. To make it real, load each month's opening figures and movements from your subscription ledger and pass the same shape.

How does it look on a phone?

The bridge narrows but keeps all five columns with their labels and signed values underneath, and the six terms sit two across. Time and amounts are always drawn left to right, also in a right-to-left page.

All 200 dashboard blocks