Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Dashboard blocks

Pro

Pricing Analytics Dashboard Block for React

Starter, Team and Scale compared in one matrix of price, subscribers, trial conversion, churn, ARPU and revenue share, with the best value marked in each row and a tier's upgrade path read on demand.

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

Compare your plans side by side before changing a price, with this pricing analytics panel for React with Base UI. A hairline frame with a plus mark on each corner opens with one stacked bar of how the subscribers split across Starter, Team and Scale, then a table with a column per tier and a row for price, subscribers, trial to paid, monthly churn, ARPU and share of revenue. The best value in each row gets a filled square and a darker bar, and a Native Select in the header changes the period between 30 days, a quarter and a year. Pressing a tier's name highlights its column and reads its upgrade path in a polite line ("38% of Team subscribers upgrade to Scale within 90 days"). It's built from Native Select and Guides, with a plain table. For pricing reviews and growth meetings.

FAQ

How do I fill it with my own plans?

Edit TIERS for the names and list prices and PERIODS for the numbers: subscribers, trial to paid, churn and ARPU per tier, and how many subscribers moved up within 90 days. The distribution bar and the share of revenue are worked out (subscribers times ARPU, shares rounded to add up to 100), and so is the best value in each row.

How is the best value chosen?

The highest value wins subscribers, trial to paid, ARPU and share of revenue, and the lowest wins churn; price has no best because a higher price is not better in itself. The best is marked by a filled square, a dark bar and a hidden "Best in this row", so it never rests on colour.

How do I read a tier's upgrade path?

Press or focus the tier's name in the table head and press Enter. The column is tinted and the line under the table says what share of that tier moved up within 90 days. The top tier says how many moved to an annual contract instead.

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

Everything: the figures are typed. To make it real, load per-plan subscribers, trial conversion, churn and ARPU for each period from your billing data, and the upgrade shares from a cohort query.

How does it look on a phone?

The bar stays full width. The table scrolls sideways inside a named, focusable region while the row labels stay in place, so you can compare the tiers one row at a time.

All 200 dashboard blocks