shadcn.io is not affiliated with official shadcn/ui
Approval Task List Block for Ark UI
A reviewer's sign-off queue with Pending, Approved and Rejected tabs, Approve and Reject on each request, a required reason to reject, and Reopen on resolved ones.
Installation
Overview
Work through what needs your sign-off, with this approval to-do list block for React with Ark UI. You are the reviewer. Tabs with underlines split the queue into Pending (you), Approved and Rejected, each with a live count. Every request shows its author's initials in an Avatar tile, the author's name and the day it was submitted. A pending row has Approve, the first of them a Shine Button, and Reject, which opens a Textarea for a reason that must be written before the rejection goes through. A resolved row says who decided and when, shows the reason for a rejection and offers Reopen, which puts the request back in Pending. Each tab is a fixed-height scroll region with an Empty state, so the foot never moves, and Guides rule the bands. For review queues, change requests and any list that waits on one person's decision.
FAQ
Why does Reject ask for a reason first?
So the author can act on it. Pressing Reject opens the field inside the row and moves focus to it; sending it empty shows a problem and keeps focus there. Cancel closes it and returns focus to the Reject button.
What does Reopen do?
It moves the request back to Pending, clears the decision date and any reason, and says so in the status line. Reopened requests keep their place in the typed order.
Why is only the first Approve colored?
A queue can have many pending rows, and one primary action per block keeps the page calm. The first pending request gets the Shine Button; the others are outline buttons with the same name pattern ("Approve 'Ship the v4.3 release notes'").
Where do the dates come from?
Each request has a typed ISO submitted date and resolved ones an ISO resolvedOn. Decisions you make are stamped with one fixed AS_OF constant (Wed 14 Oct), never the visitor's clock.