shadcn.io is not affiliated with official shadcn/ui
No Metrics Empty State Block for React Aria
A KPI dashboard with nothing tracked yet: four tick cards over four dial tiles on shared hairlines, where each pick turns a dashed needle solid and rolls a typed sample figure into its tile before Track marks them.
Installation
Overview
Let someone choose their first KPIs and watch the dashboard fill in, with this no metrics empty state for React with React Aria. A header over one framed panel opens Needleboard, a KPI dashboard, with a band of four tick cards, Revenue, Active users, Conversion rate and Session time, each a Checkbox whose whole card is its label, and a count of how many are picked. Under it a second band lays out four tiles on shared hairlines, each a drawn half dial with a dashed needle and "---" where its figure goes. Ticking a metric turns its needle solid and swings it to a typed sample value, rolls the figure in with a sliding number and labels the tile "Sample". The foot holds the one Shine Button, the only colored control, whose label follows the picks: Track 3 metrics. The panel's frame and rules come from Guides, and everything moves with CSS only.
FAQ
What stays in the page, and how do I make it real?
The picks, the sample figures and the tracked state stay in the page, and a reload or Start over takes them back. The four figures are typed (48,200 dollars, 12,480 people, 3.4 percent, 4.2 minutes) and every tile says Sample; nothing is measured or sent. To make it real, start collecting the picked metrics through your backend where the code says so and read each tile's figure and its share of the dial from your own data.
What does Track do, and why does its label change?
Its label follows the picks, so it always says what pressing it does: Track metrics with nothing picked, Track 3 metrics once three are ticked and not yet tracked, and Tracking 3 metrics, quietly, after pressing it. Changing the picks makes it ready again. Pressing it with nothing picked says so and moves focus to the first card; pressing it when there is nothing new says so too, so it never fails silently.
How are the dials worked out?
Each metric has a typed sample figure and a typed top for its dial, and the needle and the filled arc are drawn from the share of one over the other: Revenue is 48,200 of 60,000, which is 80 percent, so its needle sits 144 degrees along the half circle. Unpicked, the dial keeps one dashed needle straight up, where the first figure will point.
Is it usable with a keyboard and a screen reader?
Each card is a real checkbox named by its metric and described by its hint, reached with Tab and toggled with Space. A polite status line in the foot says what was picked and whether it is tracked, the tiles are a list whose items read their name, figure and whether it is a sample, an empty tile reads No figure yet, and the dials are hidden from assistive technology.