shadcn.io is not affiliated with official shadcn/ui
Order Tracking Dialog Block for Solid
A furniture shop's order sheet shown open: a five-step delivery timeline with days and times worked out from a fixed today, the delivery window drawn on a track with its estimate, and the scans of any step you press.
Installation
Overview
Let people follow a parcel without leaving the page, with this order tracking sheet for Solid with Ark UI. It opens from the Orders page of Plankwright, a furniture shop: the page's header holds an outline Track order 4821 Button, and the orders list, three rows with an item tile, an order number and a status chip, is drawn under a soft scrim inside a hairline frame with a plus mark on each corner. The Sheet opens at the end of the page. It names the order, a walnut side table arriving today between 2 and 5 pm, and lists five steps, Confirmed, Packed, Shipped, Out for delivery and Delivered, each with a mark (a tick, a ringed dot or a dashed circle, so progress never relies on colour) and its day and time. Under the timeline the delivery window is drawn on a track from 2 to 5 pm with the 3:40 pm estimate and the stretch it is likely to fall in, beside "Courier is 4 stops away." Pressing a step shows its scan events, newest first, and pressing it again hides them. Copy tracking link, the only Shine Button, copies the link to the clipboard for real. For preview the sheet is drawn open in place when the page loads; the header button opens the real Sheet, with the same steps. For shops, couriers, repairs and anything that moves through stages.
FAQ
Why is the sheet already open, and what do I keep?
So you can see it without a click. On load the sheet is a copy drawn in place at the end of the frame: a native dialog element that isn't modal, so nothing is trapped, hidden or focused, and the page around the preview keeps working. The Track order button opens the real Sheet, modal, with its focus trap, Escape and focus return, and the copy stays closed until a reload. Both show the same TrackBody and TrackFoot components and share the block's state, so the step you pressed in the copy is pressed in the real one. In your app keep the Sheet and drop the copy: the "in-place" state, the scrim and the dialog element inside the frame.
Which side does the sheet open from?
From the end of the page's reading direction: the right in a left-to-right page and the left in a right-to-left one. The sheet's own sides are physical, so sideOf reads the page's direction when the sheet opens and passes the matching one. The copy shown on load uses logical positions, so it is already on the right side in either direction. On a phone the copy docks to the foot of the frame as a bottom sheet, and the real sheet is full width.
Where do the days and times come from?
From one fixed date, AS_OF, and the offsets in STEPS: Confirmed is four days back, Delivered is today. Each stamp is built from typed weekday and month names, so the page reads the same on the server and in every browser and never changes when you reload it on another day. Nothing ticks and no courier is asked: in your app load the steps and their scans from your carrier's API in the same shape, and compute "Today" from the person's clock.
How is the delivery window drawn, and what does it say in words?
The track is the window from 2 to 5 pm; the lighter stretch is where the estimate is likely to fall (20 minutes either side) and the tick is the estimate itself. Positions come from minutes after midnight, so changing ETA, SLACK or the window moves the drawing and the sentence under it together, "Estimated 3:40 pm, most likely between 3:20 pm and 4:00 pm." The track is an image with that sentence as its label, and it stays left to right in a right-to-left page, because time does.
Is it accessible from the keyboard?
Yes. The real sheet is named by its title and described by its sentence, focus starts on the step being shown and stays inside until the sheet closes, and Escape, Close and Cancel return focus to Track order 4821. The steps are buttons that control the scans region, the step in force is marked as the current one, and what changed is said in a polite message. The trigger is the button wrapped in SheetTrigger with asChild, and the sheet is controlled with open and onOpenChange. The copy shown on load moves no focus; Escape inside it and its close button close it and put focus on the button.
What stays local in the demo, and how do I wire it up?
Everything but the clipboard. The order, its steps and its scans are typed in this file, the estimate is a constant, and no courier is contacted. Copy tracking link really writes the link to the clipboard and says so, or says it could not if the browser refuses. In your app fetch the steps from your tracking API, show the real link, and refresh the data when the sheet opens rather than on a timer.