shadcn.io is not affiliated with official shadcn/ui
Shipping Tracker Chat Block for Svelte
A bot chat with a tracking field that checks the TRK- and five digits shape, posts a shipment card with five scans and a Now marker, and a Notify me switch that adds a log line.
Installation
Overview
Show a parcel lookup with this shipping tracker chat for Svelte with Ark UI. A framed window of fixed height holds the thread between you and the Trackbarrow bot, marked with a Badge that says Bot. The composer is a tracking field: an Input that takes "TRK-" and five digits, with three sample numbers as buttons. A number the bot knows posts a shipment card with the item, five scan events in a vertical timeline (the current scan has a ring glyph and the word Now, scans still to come say Expected) and a "Notify me" Switch that adds a line such as "Alerts on for TRK-48210". A well-formed number it does not know gets "No such number in this demo", and a badly formed one shows the problem under the field and posts nothing. The composer's Shine Button is the only colored control. This is not a map; the map category has a package tracker that draws one.
FAQ
What stays in the page, and how do I make it real?
The three parcels, their scans and times are typed in this file, and the switch only adds a line to the log. Nothing is looked up and no alert is sent. To wire it for real, call your carrier's tracking API in lookupOf with the number, build the card from its scans, and register the alert in notify; the shape check and the timeline stay as they are.
How is a number checked?
The field turns what you type into capitals and tests it against "TRK-" and five digits before anything is posted. An empty field or a wrong shape shows the problem in a reserved line under the field, announced as an alert, and keeps your text. The line is always in the layout, so the form never changes height.
How does the timeline show where the parcel is?
By a glyph and a word, never a color. Scans that happened have a check, the current scan has a ring and the word Now, and scans still to come have a hollow dot and a time that starts with Expected. The current row is marked as the current step for a screen reader.
What does Notify me do?
It turns alerts on or off for that shipment, adds a line to the log ("Alerts on for TRK-48210" or "Alerts off") and updates the line under the composer. The first shipment has alerts on when the page opens.
Is it usable with a keyboard and a screen reader?
Yes. The log is a focusable region announced as a log, the field has a hidden label and is described by its hint, the problem is an alert, the timeline is an ordered list and the switch has a visible label. Numbers read left to right inside right-to-left text.