shadcn.io is not affiliated with official shadcn/ui
PR Review Queue Changelog Block for React
A framed table of eight open pull requests with a state toggle (counts included), a Sort select, reviewers as stacked initials, approvals as ticks, an age in days and a Stale badge from six days.
Installation
Overview
A review queue for React with Base UI, written for Reviewbay, a fictional code-review tool. A start-aligned header sits over a toolbar and a framed table of eight open pull requests. The toolbar has a toggle group that filters by state (All, Waiting, Approved, Changes requested, each with its count) and a Sort select (Oldest first, Most approved, Smallest). Each row has the title as its row header with the branch in mono, the reviewers as a stack of initials, the approvals as ticks with "1 of 2" and the state in words, and the age in days with a Stale badge from six days. A polite line under the table says how many are shown and in what order. It's built from Toggle Group, Select, Avatar, Badge and Guides, with CSS transitions for the entrance and your theme's tokens for every colour. For review tools and engineering dashboards that show who still has to look. The queue, the names and the day it is read are example data.
FAQ
How do I change the queue?
Edit PULLS at the top of the file. A pull request has a title, a branch, reviewers, how many approvals it has and required, a changes flag, an ISO opened day and a size in lines. AS_OF is the day the queue is read and STALE_FROM is six: the age is the days from opened to AS_OF, never the clock, so the block reads the same every day.
How is a pull request's state decided?
By one rule in reviewOf: Changes requested when the changes flag is set, Approved when its approvals reach required, and Waiting otherwise. The counts on the toggle come from the same rule, and the state is an icon and a word, never colour alone.
What do the three sorts do?
Oldest first sorts by age, Most approved by the approvals it has, and Smallest by lines changed. Ties fall to the older pull request and then to the title, so the order is the same every time.
Why does the block not change height when I filter?
The live table sits over an unseen copy of the full queue in the same grid cell, so the frame keeps the height of all eight rows. The copy is invisible, hidden from assistive technology and out of the tab order, and the polite line under the table says "Showing 3 of 8 pull requests" and the order.
Why is it a plain table?
It needs a caption, column headers and a row header in every row, and a plain table gives the same on every base, so a screen reader announces the title with each cell. The table scrolls inside the frame rather than the page if it ever gets too wide.
How does it fit on a phone and in a right-to-left layout?
Below md the Reviewers and Age columns go and the table keeps the pull request and its approvals: the reviewers and the age (or the Stale badge) move under the title. In a right-to-left layout the frame mirrors, while branches and counts stay left to right.
Related
- Pro
Pull Request Changelog
Code and commitsFive pull requests as an ordered list rail to rail: number, title, author, a diff size with five squares (solid for added lines, hollow for removed), a state with an icon and a word, and a button that copies the checkout command.
- Pro
Cherry-Pick Log Changelog
Code and commitsA table of eight cherry-picks with a Checkbox per row and a result word, a Target branch Select that filters it, and a script of the ticked picks with a Copy script button.
- Pro
Code Owners Changelog
Code and commitsA path tester: type a file path and see which team owns it, the pattern that matched and the number of reviewers, with the owning row ringed in a framed table of teams, patterns, reviewers and wait times.
- Pro
Release Blockers Changelog
Deploys and rolloutsA verdict header counted from the data with a cleared bar, a toggle group (Open, Cleared, All) and an inset framed table of blockers with owners, states as shapes and words, and the day each was opened.
- Pro
Commit Log Changelog
Code and commitsA git log of seven commits: a short hash with a Copy button for the full one, the commit type as a word, the message, an initials avatar and the day, with a Branch Select that swaps the list.
- Pro
Contributor Stats Changelog
ContributorsOne segmented share bar of a release's commits by contributor with a counted legend, over the three most recent changelog entries each credited with an avatar and name.