shadcn.io is not affiliated with official shadcn/ui
No Performance Data Empty State Block for Radix UI
A performance monitor's empty dashboard as the target before the data: tabs for four metrics, a chart of axes with a dashed flat line and target band, a slider that moves the target, a strip of four targets and one Set up monitoring button.
Installation
Overview
Turn an empty performance page into the targets that will fill it, with this no performance data empty state for React with Radix UI. A header sits over one framed panel ruled by Guides. The first band is Tabs for four metrics: Response time, P95, Throughput and Error rate. Under it a chart that is only axes: a flat dashed line where the data will start, a dashed band on the good side of the target, and the target itself as a solid line labelled in words, such as "P95 under 300 ms". A Slider below moves that line, and the labels, the words under the chart and a strip of the four targets follow it. The Shine Button, the only colored control, Set up monitoring, turns the flat line solid, marks the four targets as set and locks the sliders. The chart is hand-drawn, and everything moves with CSS only. For the empty state of any performance, observability or web vitals page.
FAQ
Is anything measured, and how do I make it real?
No. There is no data and the page says so ("No data yet", "Waiting for data"). The targets are numbers in the page's state and a reload resets them. To wire it for real, create the monitors with your API where the code says so, and draw your own series over the same axes once data arrives.
How does the chart stay accurate?
Everything on it is worked out from the metric's typed range: the gridline labels from its top value, the target line's place from the slider's value, and the dashed band from which side of the target is good (under for times and errors, above for throughput). The picture is hidden from assistive technology; the words under it and the slider's own value text say the same thing, and the day marks are a fixed week.
How does the slider announce changes?
It is a real slider with a name and a value text ("under 300 ms"), and the foot's polite line speaks the new target once you let go, not on every step. Each metric has its own range and step, and the target you set stays when you move to another tab and back, because it lives in the page and not in the tab.
What does Set up monitoring do?
It turns the flat line solid, changes the strip's four cells from Draft to Waiting for data, locks the sliders and quiets the button, which stays in place and says "Monitoring set up". Nothing is created. Start over unlocks everything, resets the four targets and returns focus to the button.