shadcn.io is not affiliated with official shadcn/ui
Moderation Queue Reviews Block for React Aria
A keyboard triage queue for a marketplace: eight held reviews with a progress line, and the review in focus with Approve, Reject and Escalate, each on a key, a polite status line and Undo.
Installation
Overview
A moderation queue for React with React Aria, for Scarfold, a fictional handmade-goods marketplace. A compact header says what a hold is for (abuse, spam, personal data, or readers' reports) and that a low rating is never a reason. Behind a divider, the queue sits at the start: eight held reviews as rows with the reviewer, the title and a word for where each stands (Waiting, Approved, Rejected, Escalated), under a Progress line that counts "2 of 8 reviewed". At the end is the review in focus, with its stars and text, why it was held, the rule it falls under and how many readers reported it. Below it are Approve (the Shine Button), Reject and Escalate, each with its key (A, R, E). A decision moves to the next review still waiting and a polite line says what happened and offers Undo. The counts, the progress and the words all come from the typed reviews. It's built from Progress, Kbd, Rating, Avatar, Button and Shine Button, with CSS transitions only. On a phone the review comes first and the queue sits under it.
FAQ
Where do the A, R and E keys work?
While focus is anywhere inside the block: on a queue row, on a button, on the review. They don't listen on the rest of the page, so typing elsewhere is never taken. Each key makes the same decision as its button and moves on to the next review that is still waiting. Holding a key down doesn't repeat the decision, and a key combined with Control, Alt or Command is left alone. The buttons carry aria-keyshortcuts where the library keeps it.
React Aria's Button drops aria-keyshortcuts, so on this target the keys are shown on the buttons and described in the text above them but not announced on the button itself.
What does Undo take back?
The last decision, and as many before it as you press it for: the block keeps a short trail of what each review was before you decided. Undo returns to that review, sets it back to its earlier state and puts focus on Approve. It is switched off when there is nothing to take back. Two reviews are already rejected when the page loads, and those can't be undone because you didn't decide them.
Why does the copy say a low rating is never a reason?
Moderation that hides honest criticism is not moderation. Three of the eight held reviews are low or middling ratings that no rule is broken by, held only because readers reported them; the right decision for them is Approve. The rest are held for a phone number, a link to another shop, abusive words or a private person's name, which are the reasons a review can be rejected. Change HELD to put your own reviews and reasons in.
Does a decision publish or reject anything?
No. Every decision changes the rows on this page and nothing else; the status line says "Nothing is published in this demo", and a reload starts afresh. To make it real, send the review's id and the verdict to your own endpoint from the decide helper and seed the initial verdicts from your data.