Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Dashboard blocks

Pro

Code Review Queue Dashboard Block for React Aria

Four reviewer lanes with a load bar against a capacity of 5, pull request cards with age, diff size, approvals and CI, a Reassign select that moves a card between lanes, and a detail band with the files as bars.

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 is carrying the reviews, and move work to who isn't, with this review queue for React with React Aria. A hairline frame with a plus mark on each corner holds four Proofbench reviewer lanes. Each lane shows the reviewer's initials and name, the open count and a load bar against a capacity of 5, with "over by 1" or "room for 2" in words. The cards in a lane carry a title, its age in words, the diff size as added and removed lines, approvals so far and CI as a word with a small mark. A Native Select on each card reassigns it: the card moves, the meters and the header recompute, and focus follows the card to its new lane. Pressing a title reads the pull request in the band under the lanes, with its description and its files as bars of lines added against removed. The lanes are a fixed height that scroll inside, so moving cards never moves the page. It's built from Native Select, Empty and Guides. For engineering managers, review rotas and team dashboards.

FAQ

How do I fill it with my pull requests?

Edit REVIEWERS and PULLS. A pull request has an id, a title, its owner (a reviewer's id), an ISO opened date, approvals and wants, a ci of passing, failing or running, a description and files with lines added and removed. Age is worked out against AS_OF, the diff size is the sum of the files and CAPACITY sets the meter.

What does Reassign do?

It moves the card to the chosen reviewer's lane in this page and says so in a polite line, with the new open count. The meters follow, a lane over capacity says by how much, and an emptied lane shows a short message instead of a gap. Nothing is sent to anyone.

Is it usable without a mouse?

Yes. Every title and every select is a real control in reading order, the lane region scrolls with the arrow keys, and after a reassign focus lands on the moved card's select so you can move it again.

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

Everything: the pull requests are typed and a reassignment is only state. To make it real, load the open reviews from your code host, send the new reviewer from the select's change handler, and take the capacity from your team's rota.

How does it look on a phone?

The lanes scroll sideways, snapping to each, with the next lane showing at the edge, and the selected pull request band sits under them.

All 200 dashboard blocks