shadcn.io is not affiliated with official shadcn/ui
Product Metrics Dashboard Block for Radix UI
Six usage metrics (DAU, WAU, MAU, stickiness, session length and sessions per user) as tiles that each select a 30-day line, with its definition and its last four weeks.
Installation
Overview
Show how much a product is used and pick the metric to look at with this product metrics dashboard for React with Radix UI. A hairline frame with a plus mark on each corner has six tiles on shared hairlines: daily, weekly and monthly active users, stickiness, session length and sessions per user, each with today's value and an outline Badge with its change against a week ago. The tiles are one radio group, so the arrow keys move between them. Choosing one draws its last 30 days as a hand-built line, says what it measures in a sentence ("Stickiness = DAU divided by MAU") and lists the mean of each of the last four weeks. Stickiness isn't typed: it is each day's DAU over the same day's MAU. It's built from Badge and Guides, with native radio buttons for the tiles and a CSS entrance only. For product reviews, weekly business reports and any overview where one chart serves many numbers.
FAQ
How do I use my own numbers?
Replace the six series at the top of the file with 30 daily values each, oldest first, or build them from your events. The tiles, the changes, the chart, the week means and the sentence are worked out from the series, and the end date is the one constant LAST_DAY. Only the metrics your product measures need to stay.
How is stickiness worked out?
For each day it is that day's daily active users divided by the monthly active users on the same day, rounded to a tenth of a percent. Its change is in percentage points, not a percent of a percent, so 22.1% to 22.9% reads +0.8 pt.
What is each change measured against?
The same day a week earlier, so a Saturday is never compared with a Friday. The chart's caption names both dates, and each badge also says "against a week ago" to a screen reader.