shadcn.io is not affiliated with official shadcn/ui
Shipping Label Created Success Block for React Aria
A full-height confirmation centred on a shipping label drawn in greyscale: ship-from and ship-to blocks, service code, weight and a barcode worked out from the tracking number, a real copy button for the number, the pickup window, and a download of the label as an SVG file.
Installation
Overview
Put the label at the centre of the page, with this shipping label created page for React with React Aria. It is the Parcelnest screen after a label was made, a whole screen with the page's rails and one band across it. A check in a muted tile, the heading and one sentence come first, then the label itself drawn in greyscale in a corner-marked sheet: the ship-from and ship-to blocks, the service code, the weight and a barcode of bars worked out from the tracking number, all scaled with the sheet by a container query. Under it, the tracking number with a Copy Button that really copies it and the pickup window in a list of terms and values. The one primary is the Shine Button Download label, a real Download Trigger that saves the same label as an SVG file, pinned to the foot of a phone's screen. For shipping, fulfilment and ecommerce tools.
FAQ
What stays in the page, and how do I wire it for real?
Nothing was bought and nothing prints. The addresses, the carrier (named in text only), the service, the weight and the tracking number are typed constants, and the barcode is a decorative pattern from the digits, not a scannable code. The download and the copy button are real. To wire it, buy the label from your carrier's API, show its own PDF or image, and use its real barcode; this page prints nothing so that the browser's page chrome never ends up on a label.
What is in the downloaded file?
A 600 by 400 SVG named parcelnest-label-4102-8837-6195.svg with the same addresses, service, weight, bars and grouped number as the page, in black on white. It is built from the same data, so the page and the file cannot disagree.
How does the label scale?
The sheet is a size container and all its type and bars are sized in container units, so the label shrinks as a whole on a phone and keeps its proportions, rather than wrapping or cutting off an address.