shadcn.io is not affiliated with official shadcn/ui
Order Lookup Contact Block for React Aria
An order desk that looks the order up first: a number and email, a read-only timeline with dates counted from today, then a help form that wakes once an order is found.
Installation
Overview
A contact section for React with React Aria that looks the order up before it asks anything. A start-aligned header sits over three ruled bands. The first is a lookup: an order number and an email, with three sample numbers as chips that fill the field, because the block has no server; an unknown number gets a plain message. The second is a read-only timeline drawn with Steps (ordered, packed, shipped, delivered): done steps are filled, the next one is outlined, and each has a date counted from today, with "Expected" on the ones still to come; before a lookup it waits with dashes. The third is the help form, a topic in a Select and a message, asleep and dimmed until an order is found, with a line saying why. A sent message turns into a confirmation that names the order and the topic, in the same space. It's built from Steps, Select, Field, Input, Textarea, Guides, Shine Button and Button, with your theme's tokens for every colour. For shops and marketplaces whose most common message is "where is my order?".
FAQ
Where does the lookup get its orders?
From SAMPLES at the top of the file: PK-1042 (delivered), PK-1043 (on its way) and PK-1044 (packed). Type one in any form ("pk 1043" works), with any well-formed email. Replace the check in lookUp with a request to your orders service and build the Found object from its answer; the timeline only needs the four step dates and how many are done.
Why do the dates change every day?
Each sample stores its steps as days from today (minus three, minus two, and so on) and the dates are worked out when the visitor looks the order up, never while the page renders. So a sample is always "shipped yesterday", whenever the page is read. Real orders would carry real dates.
Is the timeline accessible?
It's a list named "Order progress" whose items are the four steps. Steps normally draws a wizard whose steps are buttons; here no step has a trigger, so each is a marker, a title and a date, and nothing in it can be pressed. The summary above it ("Status: on its way") is a polite live region and focus moves to the order's heading when a lookup succeeds.
Why is the help form dimmed before a lookup?
It's inert until an order is found, so Tab skips it, and a line under the button says why. It's there from the start so the block never changes height, and it still shows the one primary button. A new lookup clears any message in progress.