shadcn.io is not affiliated with official shadcn/ui
Ecommerce Support Chat Block for React
An order desk with the order beside the thread: items, total and a delivery tracker, plus quick actions that post a tracking summary, an item picker and a postcode check.
Installation
Overview
Answer an order question with the order in view, with this ecommerce support chat for React with Base UI. A hairline frame with a plus mark on each corner holds a wide window of fixed height for Buttonmere, an online haberdashery. The thread with Rosamund Eastry sits at the start; at the end is the order it is about: order BM-20417 with three items drawn as small greyscale glyphs, the total, and a vertical Steps tracker at its third step, "Out for delivery", with the expected date. Above the composer, three outline buttons work: "Track order" posts a tracking summary, "Return an item" posts a picker of the three items and asks for at least one, and "Change address" posts a postcode Field that checks its shape. Each ends with a sample reply that says nothing was created. The composer's Shine Button, the only colored control, sends what you type; Enter sends and Shift and Enter add a line. Messages are Message and Bubble rows. The frame is ruled by Guides, and everything moves with CSS only. For a shop's support desk or a returns portal.
FAQ
What stays in the page, and how do I make it real?
Everything. The order, the tracker and the replies are typed in the file, and no return, address change or message is created or sent; each reply says so. To wire it for real, load the order for the signed-in customer, send the return and address requests to your order system where post is, and keep the tracker in step with the carrier's events.
What do the quick actions do?
Each posts a line you could have typed, and the desk answers by keyword: "Track order" posts a summary card with carrier, parcel number, status and due date; "Return an item" posts a picker; "Change address" posts a postcode field. Typing "where is my order" or "I want a refund" does the same.
How does the return picker validate?
It needs at least one item. Pressing Request return with none ticked shows "Choose at least one item to return" next to a warning glyph and does not post anything; with some ticked it posts them as your message and the desk replies. Once anything follows, the picker is spent and its boxes stop taking input.
What does the postcode check accept?
A UK-shaped postcode such as AB1 2CD, with or without the space and in either case. It checks the shape only, not that the place exists, and says what it expects when the shape is wrong. Swap the pattern for your own country's.
Is it usable with a keyboard and a screen reader?
The order is an aside with its own name, the tracker is a list that marks the current step and says "Done" for the earlier ones, the checkboxes and radios are native, and problems are announced when they appear. The drawn glyphs are hidden from assistive technology.