shadcn.io is not affiliated with official shadcn/ui
Monthly Recap Dashboard Block for React Aria
Twelve business metrics compared with the month before and ordered by the size of the change, with a slider for how big a change has to be, a diverging bar on each row and the biggest rise and fall.
Installation
Overview
Read a month in a minute with this monthly recap dashboard for React with React Aria. A hairline frame with a plus mark on each corner opens with a Slider, "Show changes over", from 0 to 50 percent, then lists the metrics that moved more than that as ruled rows: its name, last month's value, this month's, a diverging bar from a centre line (a rise to the end, a fall to the start) and a signed percent. The rows are ordered by the size of the change, the header sentence counts them ("Recap for October: 5 of 12 metrics moved more than 10%") and a last band names the biggest rise and the biggest fall of all twelve, whatever the slider says. A Native Select in the header switches between October, September and August. If the threshold leaves nothing, an Empty state fills the same space and offers every change. It's built from Slider, Native Select, Empty, Button and Guides, with a CSS entrance only. For founder updates, board packs and any report where most numbers don't matter.
FAQ
How do I use my own metrics?
Edit METRICS: each has a name, a unit (count, money, minutes or percent) and four values, July to October. Add a month to MONTHS with the index of its value and the label of the month before. The change is the new value over the old one, minus one, and the sort, the count, the highlights and the sentence follow from it.
Is a rise good news?
Not always, and the block doesn't say: churned accounts and refund requests are on the list, and a rise in them is a rise. The bar's direction and the sign carry the movement, with the fall drawn in a lighter weight, and nothing is coloured red or green. Read the metric's name for what it means.
How does the threshold work?
A metric is shown when the size of its change is greater than the slider's value, so at 10% a change of 10.3% shows and one of exactly 10% doesn't. At 0% every metric that moved at all is shown. The list keeps its height as you drag, so nothing below it jumps.
What stays local, and how do I wire it for real?
Everything: the values are typed and nothing is measured. To make it real, compute the same twelve metrics for each calendar month, keep the definition of each one (when it's counted and in what timezone) next to the report, and load them in this shape.