Stay, flight and restaurant booking cards — live price breakdowns with a counting total, a plane that flies a drawn route and time slots that update with party size.
Stay
stay.tsxDrawn cover, check-in and checkout that follow a nights stepper, a breakdown that unlocks a weekly discount and a counting total.
| Prop | Type | Default | Description |
|---|---|---|---|
name / place | string | — | Listing title and subtitle. |
rating / reviews | number | — | Badge on the cover. |
checkIn | string | "2026-10-16" | ISO date; checkout is derived from nights. |
defaultNights / defaultGuests / maxGuests | number | 3 / 2 / 4 | Stepper values. |
nightly / cleaningFee / serviceRate / weeklyDiscount | number | — | Pricing inputs. |
currency | string | "EUR" | ISO currency code. |
onReserve | ({ nights, guests, total }) => void | — | Reserve handler. |
Flight
flight.tsxFlight option with an on-time status, a plane that flies the drawn route on mount and fare tabs that crossfade perks and count the price.
| Prop | Type | Default | Description |
|---|---|---|---|
airline / flight / date | string | — | Header details. |
from / to | { code; city; time } | — | Route ends. |
duration / stops | string | — | Shown under the route. |
fares | { id; label; price; perks }[] | — | Fare tabs. |
defaultFare | string | "premium" | Initially selected fare. |
onSelect | (fareId: string) => void | — | Select handler. |
Restaurant
restaurant.tsxParty stepper, day chips and a time-slot grid whose availability updates live, ending in a confirmation with a booking code.
| Prop | Type | Default | Description |
|---|---|---|---|
name / meta / rating | string / number | — | Restaurant header. |
days | { id; weekday; date }[] | — | Selectable days. |
slots | string[] | — | 24h times, e.g. "19:30". |
isAvailable | (day, slot, party) => boolean | — | Availability; defaults to a fixed pattern. |
defaultParty / maxParty / defaultSlot | number / string | 4 / 8 / "19:30" | Initial state. |
onReserve | ({ day, slot, party }) => void | — | Reserve handler. |
Install the whole set
Installs every booking cards variant at once. Each section above has its own command for a single variant.
Pro installs use your private registry token. Add the @geturui-pro registry once — setup guide. The command works after you get Pro.
Accessibility
- Steppers are labelled button pairs with a polite live value; days, fares and slots are radiogroups.
- Fully booked slots are disabled and say so in their accessible name, not only with a strike-through.
- Totals keep a static screen-reader value while the visible number counts; reduced motion parks the plane mid-route.