shadcn.io is an independent project built on shadcn/ui
Installation
Overview
Show what a fare really includes before the price decides it with this flight card for React with React Aria. A hairline frame opens with the route: the departure time and city, a line with a layover dot and its length, and the arrival, with a sentence that says in words when it lands the next day. Below it three fare columns (Light, Standard, Flex) are native radios, each with its price and a list of carry-on, checked bag, seat and changes, drawn as a check or a dash with a word. A stepper adds up to two extra checked bags, and a description list adds the fare, the taxes and the extra bags into a total from integer cents. One Shine Button holds the fare. For airlines, trains, coaches and ferries with tiered fares.
FAQ
How do I change the fares and what they include?
Edit the LIGHT, STANDARD and FLEX constants: each has a price and taxes in cents, the number of checked bags included and four perks, each marked has or not with a word. The extra bag price is EXTRA_BAG_CENTS.
How are the bags counted?
The fare includes some (none, one or two), and the stepper adds extra ones up to MAX_EXTRA. The line under the stepper spells it out ("2 bags checked (1 included, 1 extra)") and the total adds only the extra bags' price.
Is the route live?
No. The times, the cities and the layover are typed in the file, as is the next-day note. A real card would take them from a fare search result and work out the next-day wording from the two local dates.
What stays local, and how do I wire it for real?
The held fare is page state; nothing is booked, priced or sent. Replace the constants with your fare search result and the body of hold with a call that creates the reservation.
