shadcn.io is not affiliated with official shadcn/ui
Travel Booking Checkout Block for Vue
A return flight with two drawn legs, three fares on shared hairlines, a passengers stepper that switches on a name field for each, extra bags at $35 each and a fare breakdown with 13 percent taxes, all in whole cents.
Installation
Overview
Let people choose a fare, name the passengers and see the whole price move, with this travel booking checkout for Vue with Ark UI. A compact header from Skerry Air, a regional airline, sits over a narrow hairline frame with a plus mark on each corner. The first band is the itinerary: two flights between Stenhaven and Corrowick, each with its date, times and duration and a bar drawn on a 24-hour track. Under it three fares share hairlines as radio cells (Light, Standard, Flex), each with a tick or a dash for the cabin bag, the checked bags and changes. A passengers stepper from 1 to 4 switches on a name Input for each passenger, an extra-bag stepper adds $35 a bag up to 3, and a table breaks the price into the fare for each passenger, the bags, the 13 percent taxes and the total, every figure in whole cents and every one derived from those three controls. Pay is the one Shine Button: it names the first passenger without a name and moves focus there, and a clean press confirms in this demo and gives Undo. It's built from Field, Input, Button, Shine Button and Guides, with a CSS entrance only. For airlines, coaches, ferries and anything sold per traveller.
FAQ
What does the price come from?
Three controls: the fare, the number of passengers and the extra bags. The fare line is the fare's price times the passengers, the bags line is $35 times the bags, the taxes are 13 percent of both added together, rounded once, and the total is the three added up. All of it is integer cents formatted in one place, and the button repeats the total.
What are the bars in the itinerary?
A drawing of the day: each flight is a filled stretch on a track that runs from 00:00 to 24:00, placed from its departure and arrival minutes. The times and the duration are written next to it, so the bar adds a picture to the words and is hidden from screen readers.
How do the passenger fields behave?
Four name fields are always laid out, so adding a passenger never moves what is below. The ones beyond the count are disabled and read "Not travelling". Pressing Pay with a name missing marks each empty active field with a message in its reserved line, says which passenger in the status line and moves focus to the first.
What happens at the limits?
The steppers stay pressable at their limits and answer in the polite status line: one passenger at least, four at most, and no more than three extra bags. They are not disabled, so a screen reader and a keyboard can still find them and hear why.
How does it fit a phone?
The fare cells stack, the passenger fields run one to a row, and the breakdown goes under them. The foot is pinned to the bottom of the screen so Pay stays in reach.
What stays local, and how do I connect it for real?
Everything: the flights, fares and taxes are typed at the top of the file and the booking is a piece of state. Nothing is booked or charged. To connect it, load the fares for the flights from your airline system, create the booking on your server when Pay is pressed and take the card with your payment provider's hosted fields. Passenger names are not stored by the demo.