shadcn.io is not affiliated with official shadcn/ui
Order Tracking Checkout Block for Solid
A tracking number field that names its carrier as you type: three invented carrier formats, a Detected chip, typed scans with a status worked out from the newest one, a copy button for the number and a result area that keeps its height.
Installation
Overview
Let people paste a tracking number and see where the parcel is, with this order tracking for Solid with Ark UI. A compact header from Pennyroyal Goods, a shop for plant pots and garden tools, sits over a hairline frame with a plus mark on each corner. The Field takes a tracking number; as you type it is matched against the formats of three invented carriers (Northline Courier, ten digits; Parcelnook, PN and nine digits; Harbour Post, two letters, nine digits and GB) and a Badge says "Detected: Parcelnook", or the line under the field says the start still fits a format or that the number is not one we recognise. A list of the three formats has a Try sample button each. Track parcel, the only Shine Button, shows the result: a status worked out from the newest scan ("Out for delivery"), the carrier, the number with a Copy Button, and the scans with fixed times, newest in bold. A number in a valid format that has no scans says so. The result area is sized by the longest case, so nothing moves. For order confirmation pages, emails and account areas.
FAQ
How does the carrier get detected?
Each carrier has a regular expression for its format, hoisted to the top of the file. The text is normalised first (spaces and dashes dropped, upper case) and the first carrier whose pattern matches the whole number wins. A second list of "starts" patterns tells a number that is still being typed from one that cannot match, so the line under the field says "Keep typing" instead of an error halfway through.
Where do the scans and the status come from?
From typed data: each sample number has lines of time|phase|text, and scansOf turns them into scans. The status is the phase of the newest scan (label created, in transit, out for delivery, delivered), so it can never disagree with the list. Times are shown from the ISO strings with a month table, not computed from the clock, so the page reads the same everywhere.
What if the number is valid but unknown?
Any number that matches a carrier's format is accepted, and one that is not in the typed scans says that the carrier has not recorded a scan yet, with a note that the first one usually shows within a day. A number that matches no format is refused with a message and focus returns to the field.
Why does the page not jump when the result appears?
The result area is one grid cell holding the live content and an invisible, inert copy of the longest result (five scans). The cell is as tall as the longest case, so the empty prompt, a short list and a long one all fit without moving anything below.
What does the copy button copy?
The normalised tracking number, as plain text. The button keeps its icon and the polite status line says "Copied the tracking number."
What stays local in the demo, and how do I wire it up?
The carriers are invented and the scans are typed: nothing is looked up over a network. In your app keep the format check as a first step to pick the carrier, then call that carrier's tracking API (or an aggregator) from your server with the number, and map its events to Scans.