shadcn.io is not affiliated with official shadcn/ui
Approval Sheet Gallery Block for React
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 React with Base 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.
Related
- Pro
Multi-Select Bulk Actions Gallery
Select and actEight drawn scans on shared hairlines, each with a checkbox, a Select all box that shows a mixed state, Shift to take a run, and a bar with Download, Share and an undoable Delete.
- Pro
Sort Controls Gallery
Filter, sort and tabsEight drawn bike frames that each print their date, likes and title, with a Sort by select, a reverse toggle and a Grid or List switch, so the order is checkable by eye.
- Pro
Drag To Reorder Gallery
Select and actEight drawn portfolio pages in a framed grid that you reorder by dragging a grip, by Space and the arrow keys, or with Move earlier and Move later buttons, with every move announced and logged.
- Pro
Lightbox Gallery
Stage and thumbnailsNine pictures of a photography studio's year on shared hairlines, a featured frame and a caption under each, where every frame opens one viewer dialog with the whole picture, its credit, Previous and Next, a counter, arrow keys and a swipe.
- Pro
Media Library Gallery
Filter, sort and tabsA media manager drawn as a window in a hairline frame: tabs that filter by type, a search field, a List or Grid switch, twelve files with size and upload date, and an Empty state.
- Pro
Bento Grid Testimonials
Quote gridsA quote-only bento drawn with hairlines: one large lead story beside four shorter quotes, in cells that share their lines, on the page's drafting lines.