shadcn.io is not affiliated with official shadcn/ui
Order Summary Storefront Block for Solid
A delivery check-in for a parcel: a checkbox per item as you unpack, a thin progress bar and a count, Report missing on any item not ticked, and an Everything arrived button that answers at four of four.
Installation
Overview
Let shoppers check a box against what they ordered, with this delivery check-in for Solid with Ark UI. A header names the parcel and the day it arrived, from Sedgewick, an office-supplies shop. In a hairline frame with a plus mark on each corner, a heading row counts "3 of 4 arrived" over a thin Progress bar, and a list holds the items in the box, each with a drawn thumbnail, its pack size and a Checkbox to tick as you unpack. An item you have not ticked offers Report missing, which notes it on the row in a line the row already holds, and ticking it clears the note. The action foot says how many have arrived and holds the one Shine Button, Everything arrived, which only answers at four of four and otherwise says how many are still to tick. It's built from Checkbox, Label, Progress, Button, Shine Button and Guides, with a CSS entrance only. For an order page, a delivery email or a B2B account.
FAQ
How do I fill it with my own parcel?
Edit PARCEL (an id, the arrival day and time) and ITEMS, each with a name, a pack size and a glyph for the drawn thumbnail. The count, the percentage on the bar and the foot are derived from how many items are ticked, never typed.
What does Report missing do?
It marks that item as missing on the page, shows a note on its row, and the status line reads "Noted in this demo". The button then says Undo report. To make it real, replace report with a call that opens a claim with the item and the order id, and keep the row note from its result. Nothing is sent from here.
When does Everything arrived work?
At four of four. Before that the button stays focusable and answers "Tick the other 1 item first" in the status line, instead of silently doing nothing. After it, the button reads Marked as arrived until a box changes.
What stays local?
Everything. The ticks are state in the block and nothing is saved or sent. Three of the four items start ticked so the first screen shows a count and a report in progress.
Does the list move when I tick?
No. The Report missing button is kept in place unseen and inert once an item is ticked, and the note line is reserved under every name, so rows never change height.
Is it accessible?
Each checkbox is named by its item and the word Arrived, each Report missing button names its item for a screen reader, the bar is decorative because the count is written beside it, and the foot is a polite live region present from the start. On a phone the foot is pinned to the bottom.