shadcn.io is not affiliated with official shadcn/ui
Success Metrics Onboarding Block for React Aria
A setup panel split in two: four metric cards, up to three, and a scorecard that gains a row with a target box for each one picked, saying how far the target is from today.
Installation
Overview
Ask what a new team wants to watch, and make the answer a scorecard, with this metrics step for React with React Aria. It is a setup panel of Scorewick, a growth dashboard, ruled by Guides and split in two. The cards come first in the page: four metrics (monthly recurring revenue, weekly signups, trial to paid, monthly churn) as native checkbox cards, up to three. From the large breakpoint the scorecard sits at the start: a row for each metric picked, with a Number Input for its target, its unit in words and one line saying what the metric is today and how far the target is from it ("Now $8,400. The target is 43% higher."). The three rows are always there, so a metric taken off leaves a quiet empty one and the panel keeps its height. A line says the scorecard is reviewed every Monday and when the first review is. Set my targets is the one Shine Button. On a phone the scorecard sits under the cards.
FAQ
How do I change the metrics?
Edit KPIS. Each has an id, a name, a hint line for its card, a unit (the words after the number), now (where it stands today), start (what its target box begins at), higher (whether a bigger number is better) and max (the most a target can be). LIMIT is how many can be picked.
What happens when a fourth metric is picked?
It is refused in words, not switched off: "Pick up to three. Remove one to add another." appears under the cards, the card stays where it was and keeps focus, and the cards that cannot be added say "Pick up to 3" in place of their line. Taking one off makes room again.
Where does the line under each target come from?
From the metric's typed now and the number in the box, by a small pure function: "Now 96. The target is 25% higher." A target on the wrong side of today's figure is not an error: for a metric where a bigger number is better it says "Higher is better." and leaves the choice to the person.
What does Set my targets refuse?
A metric with an empty, zero or too-large target. It names the metric ("Enter a target for Monthly recurring revenue.") under the scorecard and puts focus in that box; with no metric picked it says so and puts focus on the first card. Both lines are reserved, so nothing moves. React Aria commits a typed number when the box is left, so the sentence under it updates then.