shadcn.io is not affiliated with official shadcn/ui
Page Speed Dashboard Block for React
Four web vitals (LCP, INP, CLS, TTFB) on three-zone scales with a marker and Passes or Fails in words, a Mobile or Desktop switch, and the five slowest pages for the metric you pick.
Installation
Overview
Check whether real visitors get a fast site with this page speed dashboard for React with Base UI. A Segment Group in the header swaps Mobile and Desktop field data. Inside a hairline frame with a plus mark on each corner, four ruled rows give the 75th-percentile LCP, INP, CLS and TTFB. Each is drawn on its own three-zone rule (good, needs improvement, poor) with a marker at the value, the zone edges labelled, and "Passes" or "Fails" in words, so nothing relies on colour. A band under them lists the five slowest pages for the metric chosen in a Native Select, with the value, its zone and the samples behind it. A polite line reads the device's verdict and the slowest page. It's built from Segment Group, Native Select and Guides. For performance reviews and release checks.
FAQ
How do I fill it with my vitals?
Edit VITALS for the site's 75th-percentile value on Mobile then Desktop, with the good and poor edges and the top where the scale ends, and PAGES for each page's value per metric and its samples. The markers, the zones, the pass count and the slowest list are worked out from them.
When does a vital pass?
When its value is inside the good zone: LCP up to 2.5 s, INP up to 200 ms, CLS up to 0.1 and TTFB up to 0.8 s. Anything beyond fails, whether it needs improvement or is poor, and the zone name is written beside the word.
Why are the zones different widths?
Each scale runs from zero to a point past the poor edge, so the good and poor edges sit at their true places on it. The labels under the rule give the two edges in the metric's own unit.