shadcn.io is not affiliated with official shadcn/ui
Travel Assistant Chat Block for React
A travel agent posts flight and hotel cards with an Add to trip toggle and a nights field, and a band under the top bar totals the trip and opens an itinerary grouped by day with Remove on each item.
Installation
Overview
Show a traveller building a trip with an agent, with this travel assistant chat for React with Base UI. A hairline frame with a plus mark on each corner holds a window of fixed height for Roamwell, a travel agent's chat. The agent, Cal Thornby, posts a flight card (fictional carrier, route, times in a time tag, price) and a hotel card (name, area, price a night and a Number Input for nights), each with an "Add to trip" Toggle. A band under the top bar reads "Trip: 2 items, $944.00" and opens a Collapsible itinerary grouped by day, each item with Remove and a derived total, over the thread without moving it, ending with "Nothing was booked." Two reply buttons ask for a return flight or another hotel. The log is Message and Bubble rows, the composer's Shine Button is the only colored control, and the frame is ruled by Guides. For a travel agency or any assistant that collects choices into a plan.
FAQ
What stays in the page, and how do I make it real?
Everything. Carriers, hotels, times and prices are made up and typed in the file; nothing is booked, sent or stored, and the replies come from a short script keyed on words such as "return", "hotel" and "book". To make it real, load offers from your own supplier where the cards are drawn and send the itinerary to your booking service from the band.
How is the trip total worked out?
Flights add their price; a hotel adds its price a night times its nights, all in integer cents and shown to the cent. Change the nights on a hotel card and both the card and the band recount. Removing an item in the band un-presses its toggle on the card.
How are the days grouped?
daysOf collects what you added by date, sorts the dates and gives each its items: a flight lands on the day it leaves and a hotel on its check-in day. Add the return flight and a second day appears.
Does opening the itinerary push the thread down?
No. The band is a fixed row; its panel opens over the log and closes again, so the window never changes height. Nothing in the panel is lost when it closes.
Is it usable with a keyboard and a screen reader?
Each toggle is named for its offer ("Add Veldt Airways VA 214 to trip") and reports whether it is pressed; the nights field is labelled and steps with the arrow keys; the band is a button that says whether it is open. Added is a check mark and a pressed state, never a color alone.