shadcn.io is not affiliated with official shadcn/ui
Shipping Label Created Success Block for React
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 Base UI. 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.
Related
- Pro
Export Ready Success
Backups and exportsA full-height confirmation page for a finished export: a ring with the hours that remain of the link's 48, the file card, notebook, note and word counts, a real zip built in the browser to download and a link that really copies.
- Pro
Payment Receipt Success
Payments and refundsA full-height payment confirmation split in two: what happened and what comes next on one side, an itemised receipt table with the tax worked out in cents, a copyable receipt number and a text download on the other.
- Pro
Seat Allocator Success
Plans and limitsA full-height confirmation for seats bought in bulk: four teams with steppers that can never take more than were bought, a bar and an unassigned count that follow them, a Save allocation button with a local result, and the order beside it.
- Pro
Inventory Updated Success
Saves and updatesA confirmation panel for a stock count: tabs for three locations, each a table of SKUs with the count before, the signed change and the count after and the word Low under the reorder point, equal in height, and four sales channels that each say Synced.
- Pro
A full-height confirmation centred on a ticket: the title, host and time in UTC and in a chosen zone, a QR code of the join link, a time zone select that works the local time from typed offsets, and a real calendar file download.
- Pro
Account Restored Invoice Success
Payments and refundsA full-height confirmation for a paid overdue invoice: a framed before and now pair of the same four capabilities, locked while the account was suspended and unlocked in turn now, then what was settled, with what and when the next invoice goes out.