Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Dashboard blocks

Pro

User Growth Dashboard Block for Radix UI

Total users for seven months as a line with two projections to December, a target field that says what it needs a month against your average, and small monthly bars you can switch between net, new and churned.

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

Plan a growth target against the pace you are on with this user growth dashboard for React with Radix UI. A hairline frame with a plus mark on each corner draws total users from April to October as a hand-built line, then two projections to December: a dotted one for where the last three months' average takes you, and a dashed one for the straight path your target needs, ending in a diamond. Under it a Toggle Group switches seven small bars between net, new and churned users a month. In the side cell a Number Input sets the target users by December, and a sentence says what it needs a month, what you average, and when the trend gets there and how late that is. Four figures follow: total users with the month's change, new users, churn rate and active rate. It's built from Number Input, Toggle Group, Badge and Guides, with a CSS entrance only. For product and growth reviews, investor updates and any page where a goal meets a trend.

FAQ

How do I fill it with my numbers?

Edit the typed months at the top of the file: NEW_USERS and CHURNED for each month, START for the total before the first month and ACTIVE_NOW for users who were active in the last 30 days. The totals, the net adds, the average, the churn rate, the active rate and every sentence are worked out from those.

How are the two projections drawn?

The dotted line holds the mean of the last three months' net adds flat for November and December. The dashed line is the straight path from October's total to your target at December, so its slope is what you need each month. When the trend would get there later, the sentence names the month and how many months late; when your target is already below the current total it says so.

What can I type in the target field?

Any whole number from 6,000 to 12,000. The line and the sentence follow as you type, and the field tidies itself to a valid number when it loses focus. Anything else is dropped, so the chart never has an impossible target.

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

Everything: the months are typed and the target is not saved anywhere. To make it real, load the monthly counts from your user store, keep the target with the team's goals, and decide how many months the trend average should cover.

How does it look on a phone?

The line comes first, then the monthly bars, then the target field and the four figures. Every second month label is hidden so none overlap, and the sentence under the field keeps its height as you type.

All 200 dashboard blocks