Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Dashboard blocks

Pro

PR Review Time Dashboard Block for React Aria

Seven reviewers on a shared 0 to 24 hour scale, each a line from their fastest first review to the 90th percentile with a median diamond, a target slider that marks who is over, a sort, and their last three reviews.

Framework
UI library

Preview

Preview width

Installation

Part of Pro
Pro unlocks the code and one-line install of every Pro button and text effect, plus the MCP for your AI editor.
Get ProSign in
Have Pro already? Sign in to open it.Opens here as soon as you're Pro.

Overview

See who answers a pull request quickly and who leaves it waiting, with this review-time panel for React with React Aria. A hairline frame with a plus mark on each corner holds one ruled row per Reviewpace reviewer on a shared scale of 0 to 24 hours: a line runs from their fastest first review to the 90th percentile, a diamond sits at the median with its number beside it, and a vertical rule marks the target. A Slider sets the target from 1 to 12 hours and every reviewer whose median is over it reads "Over target" with a warning glyph. Three chips sort the rows by median, load or name. Pressing a reviewer lists their last three reviews in the band under the rows, each with its PR number, its result (Approved, Changes requested or Commented) and the minutes it took. It is built from Slider, Guides and hand-drawn ranges. For engineering leads and team health pages.

FAQ

How do I fill it with my reviewers?

Edit REVIEWERS: a name, initials, load (open reviews), fastest, median and p90 in hours, and recent, the last three reviews with a PR number, a result and minutes. The scale is SCALE_MAX hours wide. The rows, the marks, the over-target list and the header sentence are all worked out from those numbers.

What does the target slider change?

It moves the vertical rule through every row, enlarges the median diamond of each reviewer who is over it, adds the words "Over target" next to their number, and rewrites the header sentence and the list of names beside the review band. It never changes the hours themselves, so you can see how far over each person is.

How does the sort work?

Median puts the slowest first, Load puts the reviewer with the most open reviews first, and Name is alphabetical. The chips are native radio buttons, so the arrow keys move between them. The rows keep their height, so nothing below them jumps.

How do I read it without seeing the scale?

Each row is a button named with the reviewer, their median, their fastest time and their 90th percentile, and says "Over target" in words when it is. The drawing is hidden from assistive technology, and the polite status line repeats the chosen reviewer's median against the target.

What stays local, and how do I wire it for real?

Everything: the hours are typed and nothing is measured. Feed the percentiles from your review events (the time from "ready for review" to the first review comment or approval) and decide whether weekends and time zones are counted.

How does it look on a phone?

Each reviewer's name, median and flag sit on one line, with their scale underneath at full width, so the scale never shrinks. The sort chips and the slider wrap onto two lines.

All 200 dashboard blocks