shadcn.io is not affiliated with official shadcn/ui
Order Tracking Storefront Block for Vue
A guest Track your order lookup: an order number and email in two fields, three demo orders that fill them, and a vertical five-step list whose times come from the carrier's events.
Installation
Overview
Answer where is my order without an account, with this tracking page for Vue with Ark UI. A header names the page and the shop, Brindle & Moss, a houseplant seller. In a hairline frame with a plus mark on each corner, the lookup asks for an order number and the email it was placed with in two Field parts, a Shine Button to track, and a short list of three demo orders that fill both fields. A match replaces the lookup at the same height with the parcel: its status as an outline Badge, the day it is due, and a vertical five-step Steps list (Ordered, Packed, Dispatched, Out for delivery, Delivered) whose times come from typed carrier events, so a step with no event reads Not yet. An unknown number, a wrong email or an empty field marks the fields and moves focus to the first. It's built from Field, Input, Steps, Badge, Button, Shine Button and Guides, with a CSS entrance only. For a guest checkout, a small shop or a help page.
FAQ
How do I connect it to my carrier?
Edit PARCELS: each has an id (the order number), the buyer's email, a due date and events, a list of { stage, at } scans. The steps are drawn from the events alone: the latest event is the current step, a step with no event reads Not yet, and all five events mean delivered. Replace parcelOf with a call to your orders API, and return only the events the carrier has reported.
Which orders does it know?
Three: BM-20418 is out for delivery today, BM-20377 was delivered, and BM-20431 is being packed. Each is listed under the form as a button that fills the number and the email, so a visitor can try the whole flow. Numbers are matched ignoring case and spaces at the ends; emails ignoring case.
What happens with a wrong number or email?
An empty field, a number nobody has, a malformed email, or an email that does not match the order each get a line of their own beside the field, and focus moves to the first field with a problem. The status line says "Nothing was sent". To avoid telling a stranger which numbers exist, return the same sentence for a wrong number and a wrong email in production.
What stays local?
All of it. The lookup waits half a second to show the loading state and reads the typed list; no email is sent and no carrier is called. The dates are fixed (AS_OF), so "Arriving today" reads the same whenever it is opened.
Does the panel change size when a result appears?
No. The lookup and the result sit in the same grid cell, and the one you are not looking at stays in place unseen and inert, so the panel holds the taller of the two. Focus moves to the order's heading when a result appears and back to the number field when you track another.