shadcn.io is not affiliated with official shadcn/ui
Approval Sheet Gallery Block for Vue
Eight drawn design proposals on shared hairlines, each with a status badge and an Approve or Request changes choice that can be cleared, and a running tally with a progress bar.
Installation
Overview
An approval sheet for Vue with Ark UI, for Proofdesk, a design-review tool. It's one sheet, not columns. A start-aligned header carries the running tally at its end ("3 of 8 approved" over a progress bar in the theme's foreground), then eight drawn design proposals sit on shared hairlines that run from rail to rail and end the block: two columns on a phone, four from lg. Each proposal has a status badge (Pending, Approved, Changes requested: a word and a mark, never a colour alone) and a Toggle Group, Approve or Changes, that you can press again to clear. The tally, the count of proposals asking for changes and a polite line follow every decision. Decisions stay in this demo only. The proposals are drawn, never photographed: wordmarks, a landing layout, an app screen, posters, a tile study and a weave. It's built from Toggle Group, Badge, Progress and Guides.
FAQ
How does the Approve or Changes choice work?
What does the tally count?
Only approved proposals: "3 of 8 approved" and the bar's width come from the decisions, and the line beside it counts the proposals asking for changes. A polite line says what changed ("App home screen: approved. 4 of 8 approved.") for a screen reader.
How is a status shown without colour?
In words and a mark: "Approved" has a tick and a solid foreground fill, "Changes requested" has a speech mark and a quiet fill, and "Pending" is an outline. Each choice button is named with its proposal ("Approve: Wordmark A, tall capitals") so a screen reader can tell eight identical pairs apart.
Is anything saved or sent?
No. A decision is a value in the block's state, and nobody is notified. It all lives in the block's own state and is gone on reload. Each action says "nothing is saved in this demo" in a polite status line; wire the handlers to your own storage or API when you use it.
How do I use my own pictures?
The drawn pictures are one Scene component. Where the code comment says so, replace it with an <img> (object-cover in a box of the picture's own ratio) and give each entry a src. Keep each entry's ratio the picture's own so the layout doesn't change. Keep each proposal's ratio the picture's own.