Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Dashboard blocks

Pro

Profitability Dashboard Block for React Aria

Four fields for CAC, ARPU, gross margin and churn that work out lifetime value, LTV to CAC and payback as you type, with a verdict in a sentence and a cohort margin table beneath.

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

Find out what a customer is worth before you spend more to win one, with this unit economics panel for React with React Aria. A hairline frame with a plus mark on each corner opens with four fields: CAC, ARPU a month, gross margin and monthly churn. The end side cell works out lifetime value (ARPU times margin over churn), LTV to CAC and the payback in months as you type, each with its formula and the numbers in it, and a sentence gives the verdict. A field that can't be used says why and the results show dashes. Under the fields a cohort table lists six months of new customers with revenue, costs, the margin worked out from them and how many are still active, and Reset puts the starting inputs back. It's built from Field, Input, Button and Guides. For finance and growth reviews.

FAQ

How do I change the starting figures?

Edit START for the four inputs and COHORTS for the table. Each cohort has a month, revenue, costs and the share still active; its margin is worked out as revenue minus costs over revenue. The three results are worked out by unitEconomics from the inputs only, so the table is context and does not move with them.

What are the formulas, and what do the verdicts mean?

LTV is ARPU times gross margin over monthly churn, LTV to CAC divides that by CAC, and payback is CAC over ARPU times margin, in months. The verdict reads three LTV to CAC and a year of payback as healthy, three without the year as slow to pay back, one to three as repaying but thinly, and below one as losing money on each customer.

What can I type, and what happens when it is wrong?

Whole or decimal numbers, with commas or Arabic-Indic digits accepted. CAC can be 0 (the ratio then has no meaning and says so); ARPU must be above 0; margin and churn must be above 0 and at most 100. The field's note changes to say what is wrong and the results show dashes until it is fixed. The polite line speaks the result when you leave a field.

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

Everything: nothing is sent or saved, and the figures are examples, not advice. To make it real, start the fields from your own CAC, ARPU, margin and churn and feed the cohort table from your warehouse; the formulas stay the same.

How does it look on a phone?

The four fields sit two across, the results stack under them, and the cohort table drops the costs column so margin and customers still active stay readable.

All 200 dashboard blocks